关于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'])
       ]
}