cnpm（node package manager）和webpack模塊

npm是運行在node.js環境下的包管理工具，使用npm可以很快速的安裝前端文件里需要依賴的那些項目文件，比如js、css文件等。首先需要通過npm命令在根目錄創建一個packg.json配置文件，這個文件定義了你的項目所需要的各種模塊，以及項目的名稱、版本、許可證等元數據、以json格式配置項目所需的運行和開發環境。cnpm是npm的淘寶鏡像，cnpm的指令與npm是完全一樣的，把npm改為cnpm即可。

安裝packg.json配置文件

cnpm?init?-y?//在根目錄安裝packg.json，y表示yes，將略過所有問答，全部采用默認配置。安裝成功項目根目錄會出現package.json

安裝jquery包

cnpm?i?jquery?-S?//安裝jquery，大寫的S表示save，表示把query添加到運行環境dep中。安裝成功會出現node_modules目錄，該目錄存放了jquery文件

安裝webpack

webpack的作用有兩個

1.可以可以將js、css等文件模塊打包，會自動分析你的項目結構，找到這些模塊以及其它的一些瀏覽器不能直接運行的拓展語言（Scss，TypeScript等），并將其打包為合適的格式以供瀏

覽器使用。比如js文件并不能引用其他js文件，除非使用ES6的語法import，這種語法現在很多瀏覽器并不支持，webpack可以對其轉換打包成一個可以被瀏覽器解析的文件。

2.一個html頁面上的link、javascript和img等標簽總是會默認發起ajax請求向服務器索要html依賴的各種程序文件和圖片、字體圖標，這會造成頁面加載速度不夠理想。使用webpack后，由webpack統一管理這些耗時的每次請求，你不需要在每個html頁面上引入那些繁多的程序文件、圖片和字體圖標，只需要引入同一個文件（裝載了js、css等的引用）就可以解決所有引入的問題，這節約了頁面加載的耗時。

//先全局安裝webpack?CLI
cnpm?i?webpack-cli?-g?//全局安裝表示注冊到計算機上，今后其它項目也可以使用，不需要重復安裝
//再全局安裝webpack
cnpm?i?webpack?-g?
//卸載全局的webpack
cnpm?uninstall?-g?webpack?//可以用@指定版本號?,如：cnpm?uninstall?-g?webpack@3

package.json

這個文件里就是你的項目所需要的各種模塊，它配置項目的開發環境。.json的文件里不能寫注釋，不能使用單引號。

{
????"name":?"vue",
????"version":?"1.0.0",
????"description":?"",
????"main":?"index.js",
????"scripts":?{
????????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",? ? ? ??
????},
????"keywords":?[],
????"author":?"",
????"license":?"ISC",
????//簡稱dep，在運行環境下會用到的配置
????"dependencies":?{
????????"jquery":?"^3.4.1", //運行程序依賴于jquery，所以下載jquery時使用的是cnpm i jquery -S，S就是保存到運行環境
????????"webpack-cli":?"^3.3.2"
????},
????//簡稱dev，在生產環境下要用到的配置
????"devDependencies":?{
????????"webpack":?"^4.31.0", //webpack等打包工具只是用來打包的時候用 ，運行發生在打包之后，所以打包工具放在生產環境里 　　//cnpm i webpack -D ，D就是保存到生產環境里。如果不寫-S或-D則默認為-D
????????"webpack-dev-server":?"^3.3.1"
????}
}

指令的四種模式

cnpm?i?xxxmodule?安裝到本地目錄，node_modules目錄（即本地目錄）
cnpm?i?xxxmodule?-?D?安裝到本地目錄且注冊到package.json的devDependencies（dep）生產環境中
cnpm?i?xxxmodule?-?S?安裝到本地目錄且注冊到package.json的dependencies(dev)運行環境中
cnpm?i?xxxmodule?-g?安裝到計算機中，全局命令行可用，只要沒寫-g那就是安裝到本地

webpack打包指令

//將入口的main.js包轉換為瀏覽器可識別的出口bundle.js包
webpack?.\src\main.js?.\dist\bundle.js??
新版命令：webpack?.\src\main.js?-o?.\dist\bundle.js??

webpack手動打包

在vscode中，創建如下目錄和文件

打開終端輸入cnpm指令

1.cnpm?init?-y 安裝packge.json

2.cnpm?i?jquery?-S 安裝jquery包

3.cnpm?i?webpack-cli?-g 安裝全局的webpack CLI

4.cnpm?i?webpack?-g 安裝全局的webpack

5.接下來在main.js中輸入一段測試代碼，打開瀏覽器測試效果

//在main.js中通過ES6的語法引入jquery包，瀏覽器不識別ES6的語法格式，所以需要用webpack對此文件進行轉換，轉換結果在dist/bundle.js里 import?$?from?"jquery"
$(function()?{
????alert("hello");
});
//使用webpack打包main.js
webpack?.\src\main.js?.\dist\bundle.js，如果你用的最新版本：webpack?.\src\main.js -o?.\dist\bundle.js

//在index.html中直接引入bundle.js即可
<script?src="../dist/bundle.js"></script>

webpack.config.js

如不喜歡每次轉換都提供入口和出口文件路徑，可以考慮在項目根目錄創建一個webpack.config.js文件，將入口和出口路徑配置在該文件中。這樣，下次打包時只需要輸入webpack即可。

const?path=require("path");

module.exports={
????//webpack打包的入口文件
????entry:path.join(__dirname,"/src/main.js"),
????//webpack打包的出口文件
????output:{
????????path:path.join(__dirname,"/dist"),
????????filename:"bundle.js"
????}
}

webpack-dev-server模塊（自動打包）

這個是終極絕招，它可以自動監視你對程序的修改且可以將改動即時反應在瀏覽器上。也即，你不需要手動寫轉換打包的指令，連webpack指令也不需要寫。具體操作如下

1.cnpm?init?-y 安裝packge.json

2.cnpm?i?jquery?-S 安裝jquery包

3.cnpm?i?webpack-cli?-g 安裝全局的webpack CLI

4.cnpm?i?webpack?-g 安裝全局的webpack

5.cnpm?i?webpack-cli -D 安裝本地（當前項目）的webpack CLI

6.cnpm i?webpack -D 安裝本地（當前項目）的webpack

7.?cnpm i webpack-dev-server -D 安裝本地的webpack-dev-server

7.在package.json文件中的scripts屬性中添加一條

{
??"name":?"vue",
??"version":?"1.0.0",
??"description":?"",
??"main":?"index.js",
??"scripts":?{
????"test":?"echo?\"Error:?no?test?specified\"?&&?exit?1",
????"dev":?"webpack-dev-server"
??},
??"keywords":?[],
??"author":?"",
??"license":?"ISC",??
??"dependencies":?{
????"jquery":?"^3.4.1",
????"webpack-cli":?"^3.3.2"
??},
??"devDependencies":?{
????"webpack":?"^4.31.0",
????"webpack-dev-server":?"^3.3.1"
??}
}

8.在當前項目的根目錄創建webpack.config.js，添加以下代碼

const?path=require("path");

module.exports={
????//webpack打包的入口文件
????entry:path.join(__dirname,"./src/main.js"),
????//webpack打包的出口文件
????output:{
????????path:path.join(__dirname,"./dist"),
????????filename:"bundle.js"
????}
}

9.在index.html中引入還未打包的bundle.js，這個文件經過webpack-dev-server自動處理后會生成到內存中，而不再是dist目錄

<script?src="/bundle.js"></script>

10.執行cnpm run dev（終止cnpm run dev：在命令窗口按ctrl+c），輸出以下信息

在瀏覽器輸入http://localhost:8080打開網站點擊src目錄下的index.html文件查看效果。現在你對項目的js文件改動后，webpack-dev-server會立即作出響應并反映在瀏覽器上。

托管站點根目錄

有兩種方式可以托管站點根目錄，第一種是通過在package.json的scripts中為dev指定參數來設置托管的根目錄，被托管的目錄會被當做站點根目錄：

"dev":?"webpack-dev-server?--open" "dev":?"webpack-dev-server?--open?--port?3000" //自定義端口號
"dev":?"webpack-dev-server?--open? --contentBase src"?//自定義托管的站點根目錄，這會導致cnpm run dev時自動打開托管目錄下默認的index.html "dev":?"webpack-dev-server?--open? --hot" //熱重載，每次改動時不會重新生成一個bundle.js，而是將局部修改的代碼反映在已經生成過的bundle.js中，這樣做會使當你改動js代碼后瀏覽器立即刷新（刷新按鈕有反映）才會呈現改動后的結果，使用hot時只有css不會刷新頁面

第二種方式是通過在webpack.config.js的devServer中指定參數來設置托管的根目錄，被托管的目錄會被當做站點根目錄

const?path=require("path");

module.exports={
????//webpack打包的入口文件
????entry:path.join(__dirname,"./src/main.js"),
????//webpack打包的出口文件
????output:{
????????path:path.join(__dirname,"./dist"),
????????filename:"bundle.js"
????},
????devServer:{
????????open:true,
????????hot:true,
????????port:3000,
????????contentBase:"src" //托管的站點根目錄設為src而不再是vue
????}
}

引用node_module目錄下的程序包

不管你托管的目錄是vue（本頁面例子中的根目錄）還是托管的vue下面的src目錄，在引用通過cnpm指令安裝的程序包（jquery、bootstrap等文件）時，jquery、bootstrap本身是在node-module目錄，如果你的站點根目錄是src，也不用擔心無法引入與src同級別的node-module目錄下的文件。也即不管托管哪個目錄，都是使用以下方式引入node-module目錄下的包，都會去node-module去找，不用手動寫/node-module/bootstrap……

import?$?from?"jquery"?//node-module目錄的文件固定這樣引用
import?"bootstrap/dist/css/bootstrap.css"?//node-module目錄的文件固定這樣引用

css打包

webpack默認值支持js文件的打包，要打包css需要安裝專門處理css的loader模塊

1.cnpm?i?style-loader?-D 本地安裝style-loader模塊

2.cnpm?i?css-loader?-D 本地安裝css-loader模塊

3.在webpack.config.js中注冊模塊

const?path=require("path");

module.exports={
????//webpack打包的入口文件
????entry:path.join(__dirname,"./src/main.js"),
????//webpack打包的出口文件
????output:{
????????path:path.join(__dirname,"./dist"),
????????filename:"bundle.js"
????},
????devServer:{
????????open:true,
????????hot:true,
????????port:3000,
????????contentBase:"src"
????},
????//配置第三方模塊的加載器
????module:{
????????rules:[
????????????{test:?/\.css$/,use:['style-loader','css-loader']?}?//以css結尾的文件用這倆模塊進行處理 　　　?//當webpack發現使用inport引入css文件時，它會到配置文件中去查找module-rules里注冊的處理程序 　　? ? //webpack從右向左調用，先調用css-loader再調用style-loader，數組內的項順序不能改動。? ??? ? ? ? ????????]
????}
}

4.在src目錄創建css目錄，在css目錄創建index.css

#box{
????font-size:150px;
????color:red;
????font-weight:bold;
}?

5.在src目錄的main.js文件中添加以下引入css文件的代碼

import?$?from?"jquery" //jquery安裝在本地
import?"./css/index.css" //其中./表示當前目錄，不能直接寫css/index.css，否則報錯
$(function()?{????
????alert("webpack");
});

6.在src目錄的index.html中添加如下代碼

<div?id="box">webpack</div>

最后運行cnpm run dev看效果?

處理css文件中的url

#box3{
????background:??url('/img/1.PNG')?;??
????height:200px;
}

webpack不能處理url地址，這些url地址指向了圖片、字體等。這需要安裝url-loader來處理，而url-loader又依賴于file-loader

1.cnpm i file-loader -D

2.cnpm i url-loader -D

3. 注意你的webpack托管的是哪一個目錄，現在假設你的圖片路徑為：vue/src/img/1.png。那么如果你的托管的根目錄是你的項目根目錄vue，則你在css文件中的url為：/src/img/1.png。如果你把src設為站點根目錄，比如你把在webpack.config.js文件中的devServer屬性的contentBase設src為托管目錄，而你的項目根目錄本來是vue，那么你在css文件中設置的url為：img/1.png

在webpack.config.js注冊url-loader

module:?{
????rules:?[
????????{?test:?/\.css$/,?use:?['style-loader',?'css-loader']?},
????????{?test:?/\.(png?|?jpg?|?gif?|?ttf?|?jpeg)$/,?use:?'url-loader'?}
????]
}

url-loader默認不會把圖片生成為base64的編碼，但base64編碼有利于網絡傳輸，一般情況下應該將小圖片轉換為base64，大圖不適用。可通過配置module的rules來實現自動識別小圖并轉換

{?test:?/\.(png|jpg|gif|ttf)$/,?use:?'url-loader?limit=2742'?} <2742字節會被轉換，經測試無效，原因不明

處理字體圖標

比如bootstrap、阿里的iconfont等就有很多字體圖標，需要設置過濾規則，用url-loader進行處理

{?test:?/\.ttf(\?v=\d+\.\d+\.\d+)?$/,?use:?'url-loader'?},
{?test:?/\.woff(\?v=\d+\.\d+\.\d+)?$/,?use:?'url-loader'?},
{?test:?/\.woff2(\?v=\d+\.\d+\.\d+)?$/,?use:?'url-loader'?},
{?test:?/\.svg(\?v=\d+\.\d+\.\d+)?$/,?use:?'url-loader'?},
{?test:?/\.eot(\?v=\d+\.\d+\.\d+)?$/,?use:?'url-loader'?},

打包less

與css是一樣的設置方式，先在src-css目錄創建index.less文件

#box2{
????p{
????????font-size:50px;
????????background:?"#000";
????????color:red;
????}
}

在main.js引入less

import?"./css/index.less"

在webpack.config.js注冊less-loader

//配置第三方模塊的加載器
module:{
????rules:[
????????{test:?/\.css$/,use:['style-loader','css-loader']?},?
????????{test:?/\.less$/,use:['style-loader','css-loader','less-loader']} //以less結尾的文件用這兩模塊進行處理
????]
}

cnpm i less -D 本地安裝less，less-loader模塊依賴于less模塊

cnpm i less-loader -D 本地安裝less-loader模塊

打包sass

同上，loader需要：node-sass、sass-loader?

//配置第三方模塊的加載器
module:{
????rules:[
????????{test:?/\.less$/,use:['style-loader','css-loader','sass-loader']}
????]
}

打包js文件

webpack只支持一些不算太高級的ES6語法，要完整支持ES6高級語法，需要安裝babel-loader，有babel-loader是一個js高級語法編譯器，它處理之后會自動交給webpack打包到bundle.js

1.cnpm i babel-core babel-loader@7.1.5?babel-plugin-transform-runtime -D?

2.cnpm i babel-preset-env babel-preset-stage-0 -D

注：babel-loader必須是7.1.5，其它版本裝了報錯。

在webpack.config.js注冊babel-loader

module:?{
????????rules:?[??????????
????????????{?test:?/\.js$/,?use:?'babel-loader',exclude:/node_modules/?} //exclude設置被babel-loader編譯所排除的目錄，如果這個目錄被轉換，耗時很長而且不能成功運行
????????]
?}

在項目根目錄（與package.json同級）創建一個.babelrc的json文件（注：文件名起始處帶.號，不帶json后綴名）用于注冊babel-loader所使用的插件和語法

{
????"presets":["env","stage-0"],
????"plugins":["transform-runtime"]
}

在main.js中寫測試代碼

class?Person{
????static?personCount=100;
}

alert(Person.personCount);

import時的路徑提示工具

安裝擴展工具：Path Intellisense后，在設置種打開json配置輸入以下紅色部分的代碼

{
????"editor.renderLineHighlight":?"gutter",
????"editor.mouseWheelZoom":?true,
????"path-intellisense.mappings":?{
????????"@":?"${workspaceRoot}/src"
????}? ??
}

在項目根目錄下創建jsconfig.json，該文件與package.json同級

{
????"compilerOptions":?{
????????"target":?"ES6",
????????"module":?"commonjs",
????????"allowSyntheticDefaultImports":?true,
????????"baseUrl":?"./",
????????"paths":?{
??????????"@/*":?["src/*"]
????????}
????},
????"exclude":?[
????????"node_modules"
????]
}

模塊的導入導出

所有的css、js文件包都可以看成是一個一個的模塊，在需要引入這些模塊的js文件中可以通過node.js或ES6的導入導出功能，導入是為了能夠引用像jquery這樣的對象，導出是為了將某個對象暴露給外部供外部調用。不管使用這兩種方式之間的哪一種，導入導出的代碼只能成對出現，不能用ES6導入再用node導出。

在src目錄新建一個js目錄，創建一個person.js的文件。

node的導入導出

在person.js中輸入以下代碼來導出一個對象

module.exports={
????id:1,
????name:"sam"
}

在需要引入person.js模塊的其它js文件中，輸入以下代碼來導入一個對象

var?Person=require("./js/person.js");
alert(Person.name);

ES6的導入導出

在person.js中輸入以下代碼來導出一個對象

export?default{
????id:1,
????name:"sam"
}
//或
var?p={
????id:1,
????name:"sam"
}

export?default?p;

在需要引入person.js模塊的其它js文件中，輸入以下代碼來導入一個對象

import?Person?from?"./js/person.js"
alert(Person.name);

非默認的導入導出

export只能導出一個默認的變量，如果需要導出多個變量，可以如下使用

導出

var?p={
????id:1,
????name:"sam"
}
export?default?p;
export?var?msg="寒食"?//變量必須緊跟在export?后定義，不能是這樣：export?msg
export?var?result={
????money:0
}

導入第三方的包和自定義的包

import?person,{msg?as?mg,result}?from?"./js/person.js"
alert(mg);
alert(result.money);
alert(person.name);

安裝在node-modules目錄中的js包和css包的導入

import?Vue?from?"vue"?//直接寫包的名字即可導入vue對象
import?"Bootstrap/dist/css/bootstrap.min.css"?//不用寫node-modules目錄，直接寫在node-modules目錄下的Bootstrap目錄下的bootstrap文件的路徑

自定義的包的導入

import?Person?from?"./js/person.js"?//自定義的包需要提供完整的相對路徑
import?"./css/mainStyle.css" //為什么是用相對路徑?因為webpack打包后網站才會啟動，在打包之前沒有這個站點，不能使用類似網站根路徑的形式去獲得需要導入的文件

?

常用指令

cls?//清除控制臺信息
ctrl?+?c?//終止控制臺程序的執行
cnpm?info?包名//查看包的版本號
cnpm?uninstall?包名?//卸載包

移植配置

如果之前已經安裝好各個程序包，現在想移植配置到新項目中，可以復制除node-modules目錄以外的所有文件到新項目中，然后在根目錄打開powershell，輸入cnpm i即可自動將配置中的包全部安裝。此處有打包好的目錄結構和配置文件：下載（包括本頁所安裝的包及其vue相關的包），只需要運行一下npm i即可

?

*處理工具xxx-loder在webpack1.0版本不需要后綴loader

* 如果項目運行失敗的錯誤是端口號問題，可能是端口號被占用，關閉vscode重新打開或打開windows資源管理器，結束進程即可

Javascript - 學習總目錄

轉載于:https://www.cnblogs.com/myrocknroll/p/10863309.html

總結

以上是生活随笔為你收集整理的Javascript - Vue - webpack的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。