webpack 笔记

webpack 常用插件：

1. webpack webpack-cli

2. html-webpack-plugin:用于编译html模板

new HtmlWebpackPlugin({
            filename: 'index.html',
            template: './src/index.tpl.html',
            minify: {
                collapseWhitespace: true,
                removeAttributeQuotes: true
            }
        })

3. style-loader: 将css放到html标签里面

4. css-loader: 加载css文件，并且编译@import

5. less-loader: 将less文件编译为css文件

6. mini-css-extract-plugin: 将css文件抽取到单独的文件中

7. autoprefixer: 给某些css样式添加前缀,比如：webkit-transform

8. postcss-loader: 处理前缀文件

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

优化项
optimization: {
        minimizer: [
            new UglifyJsPlugin({
                cache: true,
                parallel: true,
                sourceMap: true // set to true if you want JS source maps
            }),
            new OptimizeCSSAssetsPlugin({})
        ]
    }

9. uglifyjs-webpack-plugin： 压缩js

10. optimize-css-assets-webpack-plugin：优化并且压缩css

11. babel-loader @babel/core @babel/preset-env : es6高级语法转化为es5

js中class插件：@babel/plugin-proposal-class-properties