Skip to main content

插件实践

功能性插件​

官方文档

清理过期文件​

作用：清除之前编译文件

安装：npm i -D clean-webpack-plugin

使用：

// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    output:{
        path:'./dist'
    }
    plugins:[
        new CleanWebpackPlugin() // 自动删除 output.path 目录的多余文件
    ]
}

注入全局变量​

作用：设置webpack内部变量

使用：

// webpack.config.js
const DefinePlugin= require('webpack/lib/DefinePlugin')
module.exports = {
    Plugins:{
        new DefinePlugin({
            "process.env":{
                //设置当前模式为生产
                NODE_ENV:JSON.stringify('production') 
            }
        })
    }
}

HTML相关插件​

官方文档

注入js​

作用：更新js文件到html文件，每一个 htmlWebpack 实例都会生成一个html文件

安装： npm i -D html-webpack-plugin

使用：

// webpack.config.js
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: 'index.js',
      output: {
        path: __dirname + '/dist',
        filename: 'index_bundle.js'
      },
    Plugins:{
        new HtmlWebpackPlugin ({
            title:'标题名字',
            template:'此处指定要加入到的html文件'
            name:'',
            filename:'',
            templateContent:'str|func|bool', //
           templatePaameters:'bool|obj|func', //传入模板数据
           inject:'Boolean|String',//
           minify:'bool|obj', //压缩代码
           chunks:'',// 要引入的对应的chunk(关联 entry)
        })
    }
}
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>Webpack App</title>
    <script defer src="index_bundle.js"></script>
  </head>
  <body>
  </body>
</html>

多页面打包​

作用：自动以文件夹为单位引入页面，智能打包多页面

安装：npm i -D web-webpack-plugin

使用：

const {WebPlugin}= require('web-webpack-plugin')
module.exports = {
    Plugins:{
        new WebPlugin({
            template:'./template.html',//输入的文件路径
            filename:'index.html' //最终输出的html文件名
        })
    }
}

JS相关插件​

JS文件处理（多功能）​

安装：npm i -D uglifyjs-webpack-plugin

使用：

// webpack.config.js
const UglifyJsPlugin = require('webpack/lib/optimize/UglifyJsPlugin')

module.exports = {
    Plugins:{
        new UglifyJsPlugin({
            beautity:false, //是否格式化代码
            comments:false, //删除所有注释
            compress:{ //代码优化
                drop_console:true, //去除所有console
                warnings:false,    //删除没有用到的代码时，不输出警告
                collapse_vars:true,//内联已定义但是用到一次性的变量
                reduce_vars:true,  //提取出现多次但没有定义成变量去引用的静态值
            }
        })
    }
}

提取公共文件​

安装：npm i -D commons-chunk-plugin

使用：

const commonsChunkPlugin = reuqire('commons-chunk-plugin')

CSS相关插件​

单独抽离CSS文件( < 4.0 )​

大于4.0不适用

作用：将css代码合并成一个独立的文件，大于4.0不适用可以使用mini-css-extract-plugin

安装：npm i -D extract-text-webpack-plugin

使用：

const ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports={
    module:{
        rules:[{
            test:/\.css$/,
            loaders:ExtractTextPlugin.extract({
                use:['css-loader'],
            })
        }]
    }
    plugins:[
        new ExtractTextPlugin ({
            filename:'[name].css',
        }),
    ]
}

单独抽离CSS文件( > 4.0 )​

适用于4.0之后的版本

安装：npm i -D mini-css-extract-plugin

使用：

const MiniCssExtractPlugin= require('mini-css-extract-plugin')
module.exports = {
  module: {
    rules: [{
      test: /.css$/,
      use[MiniCssExtractPlugin.loader, 'css-loader'],
    }]
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].[hash].css", //设置编译名称
      chunkFilename: "[id].css"
    })
  ]
}

自动添加浏览器前缀​

安装：npm i -D postcss-loader autoprefixer

使用：

// 需要关联 postcss-loader 使用
// postcss.config.js
module.exports = {
  plugins: [require('autoprefixer')] //引用插件
}
// webpack.config.js
const autoprefixer = require('autoprefixer');
module.exports = {
  module: {
    rules: [{
        test: /\.css$/,
        use: [
          'style-loader',
          'css-loader',
          {
            loader: 'postcss-loader', // 关联使用
            options:{
              ident: 'postcss',
              plugins:[ autoprefixer() ]
        }]
    }
  }
}

需要与postcss-loader配合使用