關於webpack4的使用

安裝webpack4

npm install webpack webpack-cli --save-dev

安裝成功，package.json以下顯示：

 

1. webpack4增長了mode配置,只有兩種值development | production。對不一樣的環境他會啓用不一樣的配置。

設置mode等於'development'，會將 process.env.NODE_ENV 的值設爲 development，開發環境下啓用optimization.nameModules（原nameModulesPlugin已經棄用）。

設置mode等於'production'，會將 process.env.NODE_ENV 的值設爲 production，而生產環境默認用optimization.noEmitOnErrors`（原noEmitOnErrorsPlugin已棄用）。

不一樣環境下配置以下：

1 默認生產環境開起了不少代碼優化（minify, splite）
2 開發時開啓注視和驗證，並加上了evel devtool
3 生產環境不支持watching，開發環境優化了打包的速度
4 生產環境開啓模塊串聯（原ModulecondatenationPlugin）
5 自動設置process.env.NODE_EVN到不一樣環境，也就是不使用DefinePlugin了
6 若是mode設置none，全部默認設置都去掉了。

package.json:

"scripts": {
  "dev": "webpack --mode development",
  "build": "webpack --mode production"
}

 2. webpack-dev-server

webpack-dev-server用來配置本地服務器, 爲webpack打包生成的文件提供web服務，自動刷新和熱替換（HMR）

安裝：

npm install --save-dev webpack-dev-server

webpack.config.js

devServer:{
        contentBase:'./dist',  //設置服務器訪問的基本目錄
        host:'localhost', //服務器的ip地址
        port:8080,  //端口
        open:true  //自動打開頁面
}

package.json

"scripts": {
    "start": "webpack-dev-server --mode development"
 }

3. 提取分離打包css

將css文件引入到js文件中，而後一塊兒打包成js文件，須要單獨提取分離css而且打包，webpack4用mini-css-extract-plugin（取代extract-text-webpack-plugin)

安裝：

npm install mini-css-extract-plugin --save-dev

webpack.config.js

const MiniCssPlugin = require("mini-css-extract-plugin");

module.exports = {
       module: {
           rules: [
              {
                 test:/\.css$/,
                 use:[MiniCssPlugin.loader,'css-loader']
               }
           ] 
       },
       plugins: [
        new MiniCssPlugin({
                   filename:'./css/[name].css'
                })
    ]
}                                

4. 壓縮優化css，去除註釋

安裝：

npm install --save-dev optimize-css-assets-webpack-plugin

webpack.config.js

const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

module.exports = {
       
       plugins: [
        new OptimizeCssAssetsPlugin({
            assetNameRegExp:/\.css$/g,
            cssProcessor:require("cssnano"),
            cssProcessorPluginOptions:{
              preset:['default',{discardComments:{removeAll:true}}]
            },
            canPrint:true
        })
     ]
}        

 5. 打包生成html

所需HtmlWebpackPlugin，會自動爲你生成一個HTML文件，根據指定的index.html模板生成對應的 html 文件。

安裝：

npm install html-webpack-plugin --save-dev

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
       
       plugins: [
        new HtmlWebpackPlugin({
        template:'./public/index.html',  //模板文件路徑
        filename:'webpack.html',         //生成的html文件名稱
        minify:{
          minimize:true,                 //打包爲最小值
          removeAttributeQuotes:true,    //去除引號
          removeComments:true,           //去除註釋
          collapseWhitespace:true,       //去除空格
          minifyCSS:true,                //壓縮html內css
          minifyJS:true,                 //壓縮html內js
          removeEmptyElements:true,      //清除內存爲空的元素
        },
       hash:true                        //引入產出資源的時候加上哈希避免緩存
       })
     ]
}     

打包效果：

public 下的 index.html 打包成爲 build下面的 webpack.html。

6.拷貝靜態文件（copy-webpack-plugin）

安裝

npm install --save-dev copy-webpack-plugin

webpack.config.js

const CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
       
       plugins: [
        new CopyWebpackPlugin([
            {
               from:__dirname+'/public/lib',
               to:__dirname+'/build/lib'
            }
        ])
     ]
}        

7. 清除文件

當咱們修改帶hash的文件並進行打包時，每打包一次就會生成一個新的文件，而舊的文件並無刪除。爲了解決這種狀況，咱們能夠使用clean-webpack-plugin在打包以前將文件先清除，以後再打包出最新的文件。

安裝

npm install --save-dev clean-webpack-plugin

webpack.config.js

const CleanWebpackPlugin = require('clean-webpack-plugin');

module.exports = {
       
       plugins: [
          new CleanWebpackPlugin(['build'])
       ]
}