1. 新建 webpack.config.js 文件

1. demo项目根目录新建 build 文件夹，新增 webpack.config.js 文件

2. webpack.config.js 文件结构

3. src/index.js 打包到 dist/index.js

4. 执行打包命令

webpack --config build/webpack.config.js 

webpack --config build/webpack.config.js --mode development

5. package.json 中新增打包配置命令

"build_dev": "webpack --config build/webpack.config.js --mode development",
"build": "webpack --config build/webpack.config.js --mode production"

2. 生产环境和开发环境的说明

2.1 拆分合并 webpack-merge

yarn add webpack-merge -D

webpack.config.js 拆分为config文件夹下3个文件 webpack.base.js

// 公共的一些配置
const webpack = require('webpack');
const path = require('path'); // node 模块
const glob = require('glob');
const htmlWebpackPlugin = require('html-webpack-plugin');
// 引入分离 CSS 文件的模块
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
// 导入清除插件，可以在每次打包之前，清除 dist 目录的内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

const DIST_PATH = path.resolve(__dirname, '../dist'); // 找到 dist 路径
const SRC_PATH = path.resolve(__dirname, '../src'); // 找到 src 路径
const entryFiles = {};
const pluginAll = [];

const files = glob.sync(path.join(SRC_PATH, '/**/*.js')); // 找到 src 目录并匹配到 src 下所有的 js 文件
files.forEach((file, index) => {
    const subkey = file.match(/src\/(\S*)\.js/)[1];
    entryFiles[subkey] = file;
});
console.log(entryFiles);

const pages = glob.sync(path.join(SRC_PATH, '/pages/**/*.html'));
console.log(pages);
pages.forEach((page, index) => {
    const pageStr = page.match(/src\/pages\/(\S*)\.html/);
    const name = pageStr[1];
    const plug = new htmlWebpackPlugin({
        filename: path.join(DIST_PATH, `${name}.html`),
        title: `test${name}`,
        template: `${SRC_PATH}/pages/${name}.html`,
        inject: true, // head body true
        hash: true,
        chunks: [name]
        // manify: true
    });
    pluginAll.push(plug);
})

module.exports = {
    // 入口 js 文件
    // entry: path.resolve(__dirname, '../src/index.js'), // 单文件打包
    // 多文件打包：方法 1 数组的形势
    // entry: [`${SRC_PATH}/index.js`, `${SRC_PATH}/test.js`],
    // 多文件打包：方法 2 对象的形式 key 打包文件名
    entry: entryFiles,
    // 输出的路径
    output: {
        path: DIST_PATH,
        filename: 'js/[name].[chunkhash:5].js',
    },
    // 模块解析：默认 webpack 只认识 js 文件，如果需要处理其他文件，需要配置对应的 loader
    module: {
        rules: [
            // 实际处理顺序：从右往左
            // css-loader 让 webpack 能够识别解析 CSS 文件
            // style-loader 通过动态的创建style标签的形式(js)，让解析后的css内容，能够作用到页面中
            // 配置 css 文件的解析
            {
                // 正则：匹配所有以 .css 结尾的文件
                test: /\.css$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader'
                ] // 先使用 css-loader 再使用 style-loader
            },
            // 配置 less 文件的解析
            {
                test: /\.less$/,
                use: [
                    {
                        loader: MiniCssExtractPlugin.loader,
                        options: {
                            publicPath: '../'
                        }
                    },
                    'css-loader',
                    'less-loader'
                ]
            },
            // 配置图片文件的解析
            // url-loader 如果不配置，默认都会将文件转为 base64 字符串的格式
            {
                test: /\.(png|jpg|gif)$/i,
                use: [
                    {
                        loader: 'url-loader',
                        // 8k以内，转成 base64，节约请求次数，8k以外单独一个文件请求
                        options: {
                            limit: 8 * 1024,
                            // 配置输出的文件名
                            name: '[name].[ext]',
                            // 配置静态资源的引用路径
                            publicPath: '../images/',
                            // 配置输出的文件目录
                            outputPath: 'images/'
                        }
                    }
                ]
            },
            // 配置高版本 js 的兼容性处理
            {
                test: /\.js$/,
                exclude: /(node_modules|bower_components)/, // 配置排除项
                use: {
                    loader: 'babel-loader',
                    options: {
                        presets: ['@babel/preset-env']
                    }
                }
            },
        ]
    },
    // 插件
    plugins: [
        // 自动生成 html 的插件
        new htmlWebpackPlugin({
            template: './public/index.html'
        }),
        // 分离 CSS 的插件，定义打包好的文件的存放路径和文件名
        new MiniCssExtractPlugin({
            filename: "css/index.css"
        }),
        // 清除 dist 目录的插件
        new CleanWebpackPlugin()
    ], // pluginAll
};

webpack.dev.js

// development 开发环境的配置
// 导入公共的配置
const path = require('path'); // node 模块
const DIST_PATH = path.resolve(__dirname, '../dist'); // 找到 dist 路径
const base = require('./webpack.base.js');

// 导入一个用于合并的包
const merge = require('webpack-merge');

// 导出开发环境的配置
// merge 可以传入多个参数，会将多个参数合并成一个对象
// 如果有重复的属性名，后面的对象属性会覆盖前面的
module.exports = merge(base, {
    mode: 'development',
    // 开发服务器
    devServer: {
        hot: true, // 热更新
        open: true, // 服务启动后，自动打开浏览器
        useLocalIp: true, // 是否在打包的时候使用自己的 IP
        contentBase: DIST_PATH, // 热启动文件所指向的文件目录
        port: 8011, // 服务端口
        host: '0.0.0.0', // 服务
        historyApiFallback: true, // 找不到的都可替换为 index.html
        proxy: { // 后端不帮我们处理跨域，本地设置代理
            '/api': 'http://localhost:3000', // 接口中有 '/api' 时代理到 'http://localhost:3000'
        },
        https: true,
    }
});

webpack.pro.js

// production 生产环境的配置
// 导入公共的配置
const base = require('./webpack.base.js');

// 导入一个用于合并的包
const merge = require('webpack-merge');

// 导出生产环境的配置
// merge 可以传入多个参数，会将多个参数合并成一个对象
// 如果有重复的属性名，后面的对象属性会覆盖前面的
module.exports = merge(base, {
    mode: 'production'
});

2.2 脚本配置 package.json

"build_dev": "webpack --config config/webpack.dev.js --mode development",
"build": "webpack --config config/webpack.pro.js --mode production",
"dev": "webpack-dev-server --config config/webpack.dev.js --mode development"