webpack（11）区分开发配置和生成配置

前言

项目总要上线，开发时候的配置不一定符合生产时候的配置，这时就要两套配置。

1、根目录下面创建config文件夹，存放两套配置

2、webpack.dev.js的配置，相对路径相对的是根目录，所以即使有上一层，也不会改变，但是绝对路径要加上上一层config,开发模式不需要输出dist文件夹，可以去掉path和clean的配置。

const path = require('path');//node.js核心模块之一，路径模块

const ESLintPlugin = require('eslint-webpack-plugin');//引入eslint插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入HTML插件

module.exports = {
    // 1、入口文件路径，相对路径
    entry: './src/js/sum.js',

    // 2、输出文件路径，绝对路径,path.resolve()获取绝对路径，
    // __dirname当前文件所在目录
    output: {
        //入口文件的输出目录
        filename: 'js/sum.js',
        // 所有文件的打包输出目录
        // path: path.resolve(__dirname,'dist'),
        // 再次打包时自动清空上次打包的上面path输出的整个目录，
        // 即为清空上次打包的整个dist目录
        // clean: true,
    },

    // 加载器
    module: {
        rules: [
            // loader的配置,每个资源处理配置项是一个对象
            {
                test: /\.css$/,//匹配.css后缀名字的文件
                use: ['style-loader', 'css-loader'],//使用的loader，使用顺序从右往左
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            {
                test: /\.s[ca]ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            // 不设置图片的处理规则时，都会默认使用file-loader进行处理图片
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                type: "asset",//表示使用内置的url-loader处理
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024,//小于10kb的使用url-loader进行处理
                    }
                },
                // 自定义文件名称
                generator: {
                    // 输出图片名称,hash代表生成的哈希值，
                    // 是唯一的，保证名称的唯一性,冒号后面的数字表示取哈希值的多少位，
                    // 不设置表示默认20位数
                    // ext表示图片的后缀名，
                    // query表S"static/images/[hash:10][ext][query]"
                    filename: "static/images/[hash:10][ext][query]"
                }
            },
            {
                test: /\.(ttf|woff?2|mp3|mp4|avi)$/,//匹配字体图标文件、或者其他不需要处理的静态资源
                //asset/resource表示使用file-loader来处理文件，会原样输出，
                // 不对文件进行额外处理
                type: "asset/resource",
                generator: {
                    // 自定义字体图标文件打包后存放的位置
                    filename: 'static/media/[hash][ext]'
                }
            },
            {
                test: /\.js$/,//匹配js文件
                //排除node_modules文件，这里的内容是处理已经好的，无需重复处理，加大工作量
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    // 这里可以在options中配置预设，
                    // 也可以单独用babel.config.js文件配置，效果一样
                    // options: {
                    //     presets: ["@babel/preset-env"]
                    // }
                }
            }
        ]
    },

    // 插件,复数且是个数组 
    plugins: [
        // plugins配置,插件一般是构造函数，需要使用new来创建实例
        // 传参是一个选项，里面可以设置一些需要的配置
        new ESLintPlugin({
            // context就是需要检查的文件目录，使用绝对路径,其他配置可以看官网
            context: path.resolve(__dirname, '../src'),
        }),
        new HtmlWebpackPlugin({
            // template指定引入输出文件的模板，这样就可以在打包的HTML中自动加上
            // 输出的JS文件，不加template参数就会新生成一个HTML文件，并加上打包的
            // JS文件，这样打包后的HTML没有我们写的代码
            template: path.resolve(__dirname,'../src/index.html')
        })
    ],
    // 搭建开发服务器
    devServer: {
        host: "localhost",//启动服务域名
        port: "8080",//启动端口号
        open: true,//打开浏览器
    },
    // 模式 development 
    mode: "development",//开发模式或者生产模式
}

3、webpack.pro.js配置，相对路径不变，绝对路径加上一级config
，mode改成production，生产模式会将代码压缩输出。

const path = require('path');//node.js核心模块之一，路径模块

const ESLintPlugin = require('eslint-webpack-plugin');//引入eslint插件
const HtmlWebpackPlugin = require('html-webpack-plugin');//引入HTML插件

module.exports = {
    // 1、入口文件路径，相对路径
    entry: './src/js/sum.js',

    // 2、输出文件路径，绝对路径,path.resolve()获取绝对路径，
    // __dirname当前文件所在目录
    output: {
        //入口文件的输出目录
        filename: 'js/sum.js',
        // 所有文件的打包输出目录
        path: path.resolve(__dirname,'../dist'),
        // 再次打包时自动清空上次打包的上面path输出的整个目录，
        // 即为清空上次打包的整个dist目录
        clean: true,
    },

    // 加载器
    module: {
        rules: [
            // loader的配置,每个资源处理配置项是一个对象
            {
                test: /\.css$/,//匹配.css后缀名字的文件
                use: ['style-loader', 'css-loader'],//使用的loader，使用顺序从右往左
            },
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader'],
            },
            {
                test: /\.s[ca]ss$/,
                use: ['style-loader', 'css-loader', 'sass-loader'],
            },
            // 不设置图片的处理规则时，都会默认使用file-loader进行处理图片
            {
                test: /\.(png|jpe?g|gif|svg)$/,
                type: "asset",//表示使用内置的url-loader处理
                parser: {
                    dataUrlCondition: {
                        maxSize: 10 * 1024,//小于10kb的使用url-loader进行处理
                    }
                },
                // 自定义文件名称
                generator: {
                    // 输出图片名称,hash代表生成的哈希值，
                    // 是唯一的，保证名称的唯一性,冒号后面的数字表示取哈希值的多少位，
                    // 不设置表示默认20位数
                    // ext表示图片的后缀名，
                    // query表S"static/images/[hash:10][ext][query]"
                    filename: "static/images/[hash:10][ext][query]"
                }
            },
            {
                test: /\.(ttf|woff?2|mp3|mp4|avi)$/,//匹配字体图标文件、或者其他不需要处理的静态资源
                //asset/resource表示使用file-loader来处理文件，会原样输出，
                // 不对文件进行额外处理
                type: "asset/resource",
                generator: {
                    // 自定义字体图标文件打包后存放的位置
                    filename: 'static/media/[hash][ext]'
                }
            },
            {
                test: /\.js$/,//匹配js文件
                //排除node_modules文件，这里的内容是处理已经好的，无需重复处理，加大工作量
                exclude: /node_modules/,
                use: {
                    loader: "babel-loader",
                    // 这里可以在options中配置预设，
                    // 也可以单独用babel.config.js文件配置，效果一样
                    // options: {
                    //     presets: ["@babel/preset-env"]
                    // }
                }
            }
        ]
    },

    // 插件,复数且是个数组 
    plugins: [
        // plugins配置,插件一般是构造函数，需要使用new来创建实例
        // 传参是一个选项，里面可以设置一些需要的配置
        new ESLintPlugin({
            // context就是需要检查的文件目录，使用绝对路径,其他配置可以看官网
            context: path.resolve(__dirname, '../src'),
        }),
        new HtmlWebpackPlugin({
            // template指定引入输出文件的模板，这样就可以在打包的HTML中自动加上
            // 输出的JS文件，不加template参数就会新生成一个HTML文件，并加上打包的
            // JS文件，这样打包后的HTML没有我们写的代码
            template: path.resolve(__dirname,'../src/index.html')
        })
    ],
    // // 搭建开发服务器
    // devServer: {
    //     host: "localhost",//启动服务域名
    //     port: "8080",//启动端口号
    //     open: true,//打开浏览器
    // },
    // 模式 production 
    mode: "production",//或生产模式
}

4、直接运行开发配置并开启开发服务器：

npx webpack --config ./config/webpack.dev.js

5、直接终端运行开发配置并开启开发服务器：

npx webpack serve --config ./config/webpack.dev.js

6、直接终端运行生产配置

npx webpack --config ./config/webpack.pro.js

直接运行打包后的HTML文件就可以正常显示了。

7、如果多次终端输出命令行，每次这么长会比较麻烦，可以在package.json文件中配置指令来编译打包，在scripts对象中设置指令：

"scripts": {
    "dev": "webpack serve --config ./config/webpack.dev.js",
    "build": "webpack --config ./config/webpack.pro.js"
  },

然后只需要在终端执行：
1）开发模式

npm run dev

2）生产模式

npm run build