webpack4基础插件使用整理

1，配置开发服务器

npm install webpack-dev-server -D

webpack.config.js:
devServer:{
   contentBase:'./build',  //基础目录
   port:3000,  //设置服务器端口号
   open: true,  //自动打开浏览器
   compress:true  //自动压缩
}

2, 自动根据html模板生成静态文件，并且自动引用打包好的脚本

npm i html-webpack-plugin -D

webpack.config.js:
plugins:[
  new HtmlWebpackPlugin({
     template:'./src/index.html',
     title:架构课',
     hash:true,
     minify:{
       removeAttributeQuotes:true,//去掉属性双引号
       collapseWhitespace:true//去掉空格，压缩
     }
  
  })
]

3, 每次重新构建的时候清楚之前构建的文件

npm install clean-webpack-plugin

webpack.config.js:
plugins:[
  new CleanWebpackPlugin(['./build'])
]

4， 配置多页应用(chunks)

当我们有多个入口多个出口的时候， 并且有多个静态页面的时候，希望每个静态页面引入特定的打包文件，例如，有两个静态页面，a.html,b.html,同时也有两个打包文件a.js, b.js，我们希望a.html中引入a.js文件，b.html中引入b.js打包文件的时候，可以用chunks进行解决多页面应用：

 entry:{
   a:"./a.js',
   b:'b.js
 }
 
 output: {
   fileName:[name].[hash:8].js,
   path:path.resolve('./build')
 }
 
 //这里需要配置两个HtmlWebpackPlugin
 plugins:[
 new HtmlWebpackPlugin({
     fileName:'a.html',//内存中打包的静态页面
     template:'./src/index.html',
      chunks:['a'] //根据入口文件进行依赖
  }),
  new HtmlWebpackPlugin({
     fileName:'b.html',
     template:'./src/index.html',
     chunks:['b']
  })
]

这样就完成最终生成的a.html文件和b.html静态页面分别引用了a.js文件和b.js文件，也就实现了一个简单的多页面应用。

5，热更新（局部更新）

当一个js修改的时候通常是浏览器会全部刷新，这样是很不友好的，所以局部刷新很有必要。

webapack.config.js:

devServer:{
  hot:true
}

plugins:[

new Webpack.HotModuleReplacementPlugin()
]

a.js: 当a.js变化的时候进行热更新。

if(module.hot) {
  module.hot.accept();
  //module.hot.accept('./a.js',function(){
    //let str = require('./a.js');
    //document.getElementById('app').innerHTML = str;
  //})
}

6， 抽离css公共样式，通过css文件的方式引用，而不是style标签引入

css文件和less文件抽离出一个css文件：

 npm install extract-text-webpack-plugin@next  -D 
或者
 npm install mini-css-extract-plugin -D 

plugins:[
new ExtractTextWebpackPlugin({
  fileName:'css/index.css'//抽离出的css文件名
 }
],

modules:{
  rules:[
  {
     test:/\.css$/,
     use: ExtractTextWebpackPlugin.extract({
        use:[
          {loader:'css-loader'}
        ]
     })
  },
    {
     test:/\.less$/,
     use: ExtractTextWebpackPlugin.extract({
       use:[
         {loader:'css-loader'},
         {loader:'less-loader'}
      ]
     })
  }
  ]
}

抽离出两个文件：css文件抽离出一个文件，less文件抽离出一个文件
ExtractTextWebpackPlugin有两种使用方式：

let CssExtract = new ExtractTextWebpackPlugin('css/css.css');
let LessExtract = new ExtractTextWebpackPlugin('css/less.css')

module.exports = {
plugins:[
  CssExtract,
  LessExtract
],
modules:{
  rules:[
  {
        test:/\.css$/,
        use: CssExtract.extract({
           use:[
             {loader:'css-loader'}
           ]
        })
     },
 {
       test:/\.less$/,
       use: LessExtract.extract({
          use:[
            {loader:'css-loader'},
            {loader:'less-loader'}
         ]
        })
     }
  ]
}
}

当使用extract-text-webpack-plugin进行抽离的时候，因为是link引入文件的方式，所以当css文件更新的时候，不会自动刷新，我们在开发的时候，可以京抽离的方式进行禁用，具体使用方法如下：

let CssExtract = new ExtractTextWebpackPlugin({
  fileName:'css/css.css',
  disable：true  //禁用文件抽离
});
let LessExtract = new ExtractTextWebpackPlugin({
  fileName:'css/less.css',
  disable：true
})
​
module.exports = {
plugins:[
  CssExtract,
  LessExtract
],
modules:{
  rules:[
  {
        test:/\.css$/,
        use: CssExtract.extract({
           fallback:'style-loader',
           use:[
             {loader:'css-loader'}
           ]
        })
     },
 {
       test:/\.less$/,
       use: LessExtract.extract({
          fallback:'style-loader',
          use:[
            {loader:'css-loader'},
            {loader:'less-loader'}
         ]
        })
     }
  ]
}
}

7, 消除无用的css样式

npm i purifycss-webpack purify-css glob -D

webpack.config.js:

let PurifyCssWebpack = require('purifycss-webpack');
let glob = require('glob');

plugins:[
  new PurifyCssWebpack({
    path:glob.sync(path.resolve('src/*.html'))
  })
]

8, css自动加前缀

npm insatall postcss-loader  autoprefixer -D

webpack.config.js:

modulse:{
rules:[
 {
        test:/\.css$/,
        use: CssExtract.extract({
           fallback:'style-loader',
           use:[
             {loader:'css-loader'},
             {loader:'postcss-loader'}
           ]
        })
     },
  
]}

另外需要在根目录下面新建一个配置文件：postcss.config.js：

module.exports = {
  plugins:['autoprefixer']
}

9.静态文件复制

npm install copy-webpack-plugin -D

webpack.config.js:

plugins:[
  new CopyWebpackPlugin([
  { 
    form: './src/doc',
    to: 'public'
  }
  ])
]