webpack生产阶段的配置

开发–测试–生产

开发版

这是开发版本的配置
webpack.config.js

const path = require('path') //使用node的path模块，来构建路径
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
   
    entry:path.join(__dirname,'/src/main.js'),
    output:{
   
        path:path.join(__dirname,'/dist'),
        filename:'bundle.js'
    },
    plugins:[
        new htmlWebpackPlugin({
   
            template:path.join(__dirname,'/src/index.html'),
            filename:'index.html'
        })
    ],
    module: {
   
        rules: [
          {
   test:/\.css$/,use:['style-loader','css-loader?modules&localIdentName=[name]_[local]-[hash:5]']},
          {
   test:/\.less$/,use:['style-loader','css-loader','less-loader']},
          {
   test:/\.scss$/,use:['style-loader','css-loader','sass-loader']},
          {
   test:/\.(png|gif|bmp|jpg|jpeg)$/,use:'url-loader?limit=5000&name=[hash:8]-[name].[ext]'},
          {
   test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},
          {
   
            test:/\.jsx?$/,
            use: {
   
                loader: 'babel-loader',
                options: {
   
                  presets: ['@babel/preset-env','@babel/preset-react'],
                  plugins: ['@babel/transform-runtime']
                }
              },
            exclude: /node_modules/,        
        },
        ]
    }
}

对插件和配置的了解

1. 我们进行打包无非就是抽离，压缩。打包成规范较小的文件
2. webpack-clean-plugin :检阅打包的文件目录是否存在旧文件，是的话进行清理(在每次构建前清理 /dist 文件夹，这样只会生成用到的文件。)
3. html-webpack-plugin:在内存生成新的文件，并将打包的bundle.js文件注入,我们可以利用它压缩我们的HTML代码
4. uglifyjs-webpack-plugin : 这个插件用来压缩下我们的JS文件
5. mini-css-extract-plugin : 提取我们的css文件，还有可以配置对我们引入的背景图片的处理
6. optimize-css-assets-webpack-plugin 压缩我们的css文件