【webpack】5.开发和生产模式的配置加载

webpack学习

【webpack】1.快速入门
【webpack】2.webpack核心–loader
【webpack】3. 将入口html也打包
【webpack】4. webpack-dev-server思考
【webpack】5.开发和生产模式的配置加载

之前做的一直是开发模式，但要上产线时候要是生产模式。几乎所有的loader都会去参考webpack.config.js的mode。所以要用不同的文件去控制

1. script标明两份配置文件

之前的配置文件叫webpack.config.js，是开发模式的配置文件,可将其改名为webpack.dev.js，复制该文件并命名为webpack.prod.js
这样就有两份配置文件。那怎么去调用/加载这两个文件，要在package.json中的scrip进行设置，标明用哪个配置文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "node_modules/.bin/webpack --watch --config webpack.prod.js",
    "dev":"node_modules/.bin/webpack-dev-server --open --config webpack.dev.js"
  },

2. 修改配置文件

再分别修改webpack.dev.js和webpack.prod.js。主要区别就是mode的修改，filename加了hash避免浏览器缓存造成的问题（具体见html入口文件打包）的后面，还改了removeComments: true（移除注释）
dev:

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    mode: 'development',//开发模式
    entry: './js/index.js',//入口文件
    output: {//出口
        filename:'pack.js',//文件名
        path:__dirname + '/dist',//当前目录下
    },
    plugins : [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),//是一个构造器，new一下
    ],
    module: {
        rules: [
            {
                test: /\.css$/,//正则表达式，只要以css结尾的文件遵循这个规则
                use:[
                    {
                        loader:'style-loader'
                    }, 
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    }
                ]//style-loader就是把这个文件放到html的<style>里
            },
            {
                test: /\.(jpg|jpeg|png|gif)$/i,
                use: [
                    {
                    loader: 'file-loader',
                    options: {
                        publicPath: './dist/'
                    }
                    }
                ]
            }
        ]
    }
}

prod:
在生成环境再装一个插件（清空文件插件），运行

npm i clean-webpack-plugin

配置在webpack.prod.js中

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports={
    mode: 'production',//开发模式
    entry: './js/index.js',//入口文件
    output: {//出口
        filename:'pack.[hash].js',//避免缓存策略
        path:__dirname + '/dist',//当前目录下
    },
    plugins : [
        new HtmlWebpackPlugin({
            template: './index.html',
            removeComments: true,
        }),//是一个构造器，new一下
          new CleanWebpackPlugin(),//这样每次打包之前文件夹都会被清空，不会积累很多新的pack.XXX.js
    ],
    module: {
        rules: [
            {
                test: /\.css$/,//正则表达式，只要以css结尾的文件遵循这个规则
                use:[
                    {
                        loader:'style-loader'
                    }, 
                    {
                        loader: 'css-loader',
                        options: {
                            sourceMap: true,
                        }
                    }
                ]//style-loader就是把这个文件放到html的<style>里
            },
            {
                test: /\.(jpg|jpeg|png|gif)$/i,
                use: [
                    {
                    loader: 'file-loader',
                    options: {
                        publicPath: './dist/'
                    }
                    }
                ]
            }
        ]
    }
}

3.merge抽出通用配置

可以发现prod和dev中有很多内容是重复的，可以提取出来放在一个新的配置文件中。在项目目录下新建一个webpack.common.js,把dev和prod中的entry,output,module剪切出来
webpack.common.js

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  entry  : './js/index.js',
  output : {
    filename : 'pack.[hash].js',
    path     : __dirname + '/dist',
  },
  module: {
    rules: [
        {
            test: /\.css$/,//正则表达式，只要以css结尾的文件遵循这个规则
            use:[
                {
                    loader:'style-loader'
                }, 
                {
                    loader: 'css-loader',
                    options: {
                        sourceMap: true,
                    }
                }
            ]//style-loader就是把这个文件放到html的<style>里
        },
        {
            test: /\.(jpg|jpeg|png|gif)$/i,
            use: [
                {
                loader: 'file-loader',
                options: {
                    publicPath: './dist/'
                }
                }
            ]
        }
    ]
}
};

安装webpack-merge,这个库就是把两个webpack文件合并起来

npm i webpack-merge --save

再分别在webpack.dev.js和webpack.prod.js中引入该库
webpack.dev.js

const HtmlWebpackPlugin  = require('html-webpack-plugin');
const merge = require('webpack-merge');
module.exports= merge(require('./webpack.common'), {
    mode: 'development',//开发模式
    plugins : [
        new HtmlWebpackPlugin({
            template: './index.html'
        }),//是一个构造器，new一下
    ],
}
)

webpack.prod.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const merge = require('webpack-merge')
module.exports = merge(require('./webpack.common'),{
    mode: 'production',//开发模式
    plugins : [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',
            removeComments: true,
        }),//是一个构造器，new一下
    ],
}
)