Webpack 常用命令總結以及常用打包壓縮方法

阿新 • • 發佈：2018-11-23

前言：Webpack是一款基於node的前端打包工具，它可以將很多靜態檔案打包起來，自動處理依賴關係後，生成一個.js檔案，然後讓html來引用，不僅可以做到按需載入，而且可以減少HTTP請求，節約頻寬。

常用命令如下：

npm install webpack -g // 全域性安裝webpack npm init -y //初始化預設的package.json檔案 npm install webpack --save-dev //下載webpack外掛到node_modules 並在package.json檔案中加上webpack的配置內容

webpack //對專案進行打包

webpack --watch // 自動監控檔案的改變 webpack --display-modules //打包時顯示隱藏的模組 webpack --display-chunks //打包時顯示chunks webpack --display-error-details //顯示詳細錯誤資訊 npm install {whatever}-loader --save-dev //安裝loader並將該loader配置到package.json檔案中 =======================

1.配置與安裝

在node已經安裝完成的前提下，全域性安裝webpack

$ cd d:

$ mkdir test && cd test //建立test ，並進入

$ npm install -g webpack //等待100s，安裝完成，也可以使用淘寶映象

$ npm init //初始化package.json檔案

$ npm install --save-dev webpack //新增依賴，在package.json中宣告依賴,等待安裝完成

2.基本操作$webpack main.js webpack.js

當前目錄下建立如下工作結構:

/---------test

----app
----main.js
----index.js

----index.html

專案目錄下，app資料夾含有兩個js檔案，修改如下：

//main.js ，這是Webpack主要的入口檔案

require('./index.js');

//index.js ，這是被主檔案引用的檔案

document.write('Hello,world!');

//index.html ，供瀏覽器解讀

<html>

...

...

</html>

webpack.js是哪來的呢？就是通過webpack打包生成的js檔案，接下來，

開始生成webpack.js檔案：

$ webpack main.js webpack.js

可以看到已經打包成功了，此時檢視IDE中的專案目錄，根目錄下已經多了一個webpack.js檔案。然後用瀏覽器開啟index.html，效果如下：

此時檢視網頁原始碼：

3.進階操作

（配置webpack.config.js或者配置package.json，後者依賴前者）每次在命令列敲目錄除錯，是很痛苦的，因此需要一次配置，多次使用的方法。

在根目錄下新建檔案： webpack.config.js (名字就是這樣，規定，不能改)，內容如下：

module.exports = {
//入口檔案位置
entry:__dirname+'/app/main.js',

//出口
output:{
//路徑
path:__dirname,
filename:'webpack.js'
}

}

這裡的 __dirname是一個node的全域性變數，用於指向當前的工作目錄，調皮的我console.log了一下這個變數：

確認無疑。

這樣，我們的webpack.js寫完以後，可以直接在命令列中敲：

$ webpack
1
可以發現，專案中也同樣的會生成目標js檔案，也就是webpack.js，這樣非常方便，省事。

還有一種配置方法，將package.json檔案中”scripts”裡面新增鍵值對：

這樣同樣可以在專案目錄生成目標js檔案，直接在命令列裡敲

$ npm start //因為webpack是全域性安裝的，直接value給webpack，而不用跟路徑
1
如果start被佔用了/衝突了，也可以在scripts下面自定義一個鍵值對：

"zq":"webpack"

$ npm run zq //稍作修改cmd 命令

最後還是可以生成。

4.webpack伺服器監聽程式碼變動，自動重新整理及source-map

4.1關於source-map，

也就是在webpack.config.js中配置 devtool (develpment tool)的值，例如我這樣配置：

在webpack完成檔案打包後，會自動生成一個與目標檔案相同名的 .map檔案，用來說明打包檔案的每個地方對應的是哪些檔案，簡而言之，讓你能知道原始碼是在哪裡錯的，幫你刨根問底，而不用開發者自己去Debug。

參考文章1：入門WEBPACK，看這篇文章就夠了—-簡書

參考文章2：Webpack中的sourcemap

4.2 webpack伺服器

首先單獨安裝 server 包：

$ npm install --save-dev webpack-dev-server
1
同樣的，在webpack.config.js中做出相應的配置：

module.exports = {
devtool: 'source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {

},

devServer: {
contentBase: "./",//本地伺服器載入index.html頁面所在的目錄，這裡寫的是根目錄
historyApiFallback: true,//不跳轉
inline: true//實時重新整理,
}

}

配置好config後，還得配置一下package.json，在scirpts裡面新增server：

"scripts": {
"start": "webpack",
"server": "webpack-dev-server --open", 
"test": "echo \"Error: no test specified\" && exit 1"
},

接著，在命令列執行

$ npm run server

/*屆時伺服器會自動啟動，並且開啟瀏覽器,預設埠為8080，也可以

devServer:{

port:4040 //自己配置埠為4040

}

下面是一個伺服器跑起來後的演示結果，我不斷的修改work.js 中 document.write的值，從而伺服器會自動檢測並重新整理頁面：

5.非JS檔案的操作(img,json,css……),豬腳：Loaders

5.1 基本概念

前面都在說js檔案，官網說什麼檔案都可以當做模組打包，下面就來試試非js檔案。

首先要明確的是，webpack只能識別js檔案，如果要識別非js檔案，就需要loader來解析這些檔案。

loaders 需要單獨安裝，並且在webpack.config.js中的modules關鍵字下進行配置。

Webpck2以上已經支援對json的解析打包，不需要額外的loaders，可以在main.js中

var json = require('../package.json')//json在它的上級目錄

document.write(json.scripts.server);

執行結果：

可見，網頁中，沒有通過任何第三方loader，即可將json解析並打包成bundle.js。

5.2 Bable

Bable可以使得開發者使用最新的ECMAscript標準來書寫程式碼，而不用管新標準是否被當前使用的瀏覽器完全支援。

還是需要單獨安裝Bable的包：

$ npm install --save-dev babel-core babel-loader babel-preset-env

安裝完成後，在webpack.config.js下的module關鍵字下進行配置：

module.exports = {
devtool: 'source-map',

entry: __dirname + "/app/main.js",

output: {

path: __dirname,

filename: 'bundle.js'

},


devtool: 'eval-source-map',

devServer: {

contentBase: "./public",//本地伺服器所載入的頁面所在的目錄

historyApiFallback: true,//不跳轉

inline: true//實時重新整理

},

module: {

rules: [

{

test: /\.js$/, //正則匹配，必須

use: { //使用到的loader

loader: "babel-loader", //loader名

options: { //選項

presets: [ //預先配置

"env"

]

}

},

exclude: /node_modules/ //不包含的目錄或檔案

}

]

}

};

5.3 CSS檔案處理

webpack提供兩個工具處理樣式表，css-loader 和 style-loader，二者處理的任務不同，css-loader使你能夠使用類似@import 和 url(…)的方法實現 require()的功能,style-loader將所有的計算後的樣式加入頁面中，二者組合在一起使你能夠把樣式表嵌入webpack打包後的JS檔案中。

同樣先安裝兩個包 style-loader和css-loader

$ npm install --save-dev style-loader css-loader
1
module: {
rules: [
{.......}，
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
也可以簡寫：
{
test:/\.css$/.

use:[{

loader:"style!css" //這裡的執行順序是從右往左，css應該在style之前執行

}]
}

根目錄下新建 ./src/index.css，寫一個body的背景為green，然後在入口檔案main.js中,require(‘../src/index.css’)，接著通過命令列$ webpack
此時檢視index.html，發現頁面背景已經變成綠色

6.外掛plugins

先安裝外掛的包：

cnpm install html-webpack-plugin
1
在webpack.config.js中頭部，引入依賴：

let webpack = require('webpack');
1
然後在webpack.config.js中配置根鍵值對：

plugins: [
new webpack.BannerPlugin('版權所有，翻版必究')
],

webpack //對專案進行打包

1.配置與安裝

在node已經安裝完成的前提下，全域性安裝webpack

$ cd d:

$ mkdir test && cd test //建立test ，並進入

$ npm install -g webpack //等待100s，安裝完成，也可以使用淘寶映象

$ npm init //初始化package.json檔案

$ npm install --save-dev webpack //新增依賴，在package.json中宣告依賴,等待安裝完成

2.基本操作$webpack main.js webpack.js

當前目錄下建立如下工作結構:

/---------test

----app
----main.js
----index.js

----index.html

專案目錄下，app資料夾含有兩個js檔案，修改如下：

//main.js ，這是Webpack主要的入口檔案

require('./index.js');

//index.js ，這是被主檔案引用的檔案

document.write('Hello,world!');

//index.html ，供瀏覽器解讀

<html>

...

...

</html>

webpack.js是哪來的呢？就是通過webpack打包生成的js檔案，接下來，

開始生成webpack.js檔案：

$ webpack main.js webpack.js

可以看到已經打包成功了，此時檢視IDE中的專案目錄，根目錄下已經多了一個webpack.js檔案。然後用瀏覽器開啟index.html，效果如下：

此時檢視網頁原始碼：

3.進階操作

（配置webpack.config.js或者配置package.json，後者依賴前者）每次在命令列敲目錄除錯，是很痛苦的，因此需要一次配置，多次使用的方法。

在根目錄下新建檔案： webpack.config.js (名字就是這樣，規定，不能改)，內容如下：

module.exports = {
//入口檔案位置
entry:__dirname+'/app/main.js',

//出口
output:{
//路徑
path:__dirname,
filename:'webpack.js'
}

}

這裡的 __dirname是一個node的全域性變數，用於指向當前的工作目錄，調皮的我console.log了一下這個變數：

確認無疑。

這樣，我們的webpack.js寫完以後，可以直接在命令列中敲：

$ webpack
1
可以發現，專案中也同樣的會生成目標js檔案，也就是webpack.js，這樣非常方便，省事。

還有一種配置方法，將package.json檔案中”scripts”裡面新增鍵值對：

這樣同樣可以在專案目錄生成目標js檔案，直接在命令列裡敲

$ npm start //因為webpack是全域性安裝的，直接value給webpack，而不用跟路徑
1
如果start被佔用了/衝突了，也可以在scripts下面自定義一個鍵值對：

"zq":"webpack"

$ npm run zq //稍作修改cmd 命令

最後還是可以生成。

4.webpack伺服器監聽程式碼變動，自動重新整理及source-map

4.1關於source-map，

也就是在webpack.config.js中配置 devtool (develpment tool)的值，例如我這樣配置：

參考文章1：入門WEBPACK，看這篇文章就夠了—-簡書

參考文章2：Webpack中的sourcemap

4.2 webpack伺服器

首先單獨安裝 server 包：

$ npm install --save-dev webpack-dev-server
1
同樣的，在webpack.config.js中做出相應的配置：

module.exports = {
devtool: 'source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname,
filename: 'bundle.js'
},
module: {

},

devServer: {
contentBase: "./",//本地伺服器載入index.html頁面所在的目錄，這裡寫的是根目錄
historyApiFallback: true,//不跳轉
inline: true//實時重新整理,
}

}

配置好config後，還得配置一下package.json，在scirpts裡面新增server：

"scripts": {
"start": "webpack",
"server": "webpack-dev-server --open", 
"test": "echo \"Error: no test specified\" && exit 1"
},

接著，在命令列執行

$ npm run server

/*屆時伺服器會自動啟動，並且開啟瀏覽器,預設埠為8080，也可以

devServer:{

port:4040 //自己配置埠為4040

}

下面是一個伺服器跑起來後的演示結果，我不斷的修改work.js 中 document.write的值，從而伺服器會自動檢測並重新整理頁面：

5.非JS檔案的操作(img,json,css……),豬腳：Loaders

5.1 基本概念

前面都在說js檔案，官網說什麼檔案都可以當做模組打包，下面就來試試非js檔案。

首先要明確的是，webpack只能識別js檔案，如果要識別非js檔案，就需要loader來解析這些檔案。

loaders 需要單獨安裝，並且在webpack.config.js中的modules關鍵字下進行配置。

Webpck2以上已經支援對json的解析打包，不需要額外的loaders，可以在main.js中

var json = require('../package.json')//json在它的上級目錄

document.write(json.scripts.server);

執行結果：

可見，網頁中，沒有通過任何第三方loader，即可將json解析並打包成bundle.js。

5.2 Bable

Bable可以使得開發者使用最新的ECMAscript標準來書寫程式碼，而不用管新標準是否被當前使用的瀏覽器完全支援。

還是需要單獨安裝Bable的包：

$ npm install --save-dev babel-core babel-loader babel-preset-env

安裝完成後，在webpack.config.js下的module關鍵字下進行配置：

module.exports = {
devtool: 'source-map',

entry: __dirname + "/app/main.js",

output: {

path: __dirname,

filename: 'bundle.js'

},


devtool: 'eval-source-map',

devServer: {

contentBase: "./public",//本地伺服器所載入的頁面所在的目錄

historyApiFallback: true,//不跳轉

inline: true//實時重新整理

},

module: {

rules: [

{

test: /\.js$/, //正則匹配，必須

use: { //使用到的loader

loader: "babel-loader", //loader名

options: { //選項

presets: [ //預先配置

"env"

]

}

},

exclude: /node_modules/ //不包含的目錄或檔案

}

]

}

};

5.3 CSS檔案處理

同樣先安裝兩個包 style-loader和css-loader

$ npm install --save-dev style-loader css-loader
1
module: {
rules: [
{.......}，
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
也可以簡寫：
{
test:/\.css$/.

use:[{

loader:"style!css" //這裡的執行順序是從右往左，css應該在style之前執行

}]
}

6.外掛plugins

先安裝外掛的包：

cnpm install html-webpack-plugin
1
在webpack.config.js中頭部，引入依賴：

let webpack = require('webpack');
1
然後在webpack.config.js中配置根鍵值對：

Webpack 常用命令總結以及常用打包壓縮方法

1.配置與安裝

2.基本操作$webpack main.js webpack.js

3.進階操作

4.webpack伺服器監聽程式碼變動，自動重新整理及source-map

4.1關於source-map，

4.2 webpack伺服器

5.非JS檔案的操作(img,json,css……),豬腳：Loaders

5.1 基本概念

5.2 Bable

5.3 CSS檔案處理

6.外掛plugins

1.配置與安裝

2.基本操作$webpack main.js webpack.js

3.進階操作

4.webpack伺服器監聽程式碼變動，自動重新整理及source-map

4.1關於source-map，

4.2 webpack伺服器

5.非JS檔案的操作(img,json,css……),豬腳：Loaders

5.1 基本概念

5.2 Bable

5.3 CSS檔案處理

6.外掛plugins

相關推薦