第四节：Webpack本地服务器搭建、剖析devServer的HRM热替换和其它配置、resolve模块解析、区分开发/生产环境方案实战

// 这里必须通过 commonjs的写法配置，不能写 ES6的写法
const path = require('path');
// 导入插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { DefinePlugin } = require("webpack");
const { VueLoaderPlugin } = require('vue-loader/dist/index');

module.exports = {
    target: "web",
    entry: "./src/main.js", //入口文件
    output: {
        path: path.resolve(__dirname, "../build"), //打包后存放路径, 必须写绝对路径
        filename: "bundle.js" //打包后的文件名称
    },
    resolve: {
        extensions: [".js", ".json", ".mjs", ".vue", ".ts", ".jsx", ".tsx"], //vue ts jsx tsx 是自己添加的后缀
        alias: {
            "@": path.resolve(__dirname, "../src"),
            "@js": path.resolve(__dirname, "../src/js")
        }
    },
    module: {
        rules: [{
                test: /.css$/, //（表示所有的css结尾的文件都进行匹配）
                use: ["style-loader", "css-loader"]
            },
            {
                test: /.less$/, //（表示所有的less结尾的文件都进行匹配）
                use: ["style-loader", "css-loader", "less-loader"]
            },
            // 文件解析功能，"asset/resource"（等价于file-loader ）
            {
                test: /.(jpe?g|png|gif|svg)$/,
                type: "asset/resource",
                generator: {
                    filename: "img/[name]_[hash:6][ext]"
                }
            },
            // 解析字体(也可以用file-loader处理)
            {
                test: /.(eot|ttf|woff2?)$/,
                type: "asset/resource",
                generator: {
                    filename: "font/[name]_[hash:6][ext]"
                }
            },
            // Vue解析打包
            {
                test: /.vue$/,
                loader: "vue-loader"
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./public/index.html",
            title: "hello webpack"
        }),
        new DefinePlugin({
            BASE_URL: "'./'",
            __VUE_OPTIONS_API__: true,
            __VUE_PROD_DEVTOOLS__: false
        }),
        new VueLoaderPlugin()
    ]
}

const path = require('path');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.conf');

module.exports =merge(commonConfig, {
    mode: "development", // 设置模式， development 开发阶段, 会设置development, production 准备打包上线的时候, 设置production（默认）
    devtool: "source-map", // 设置source-map, 建立js映射文件, 方便调试代码和错误(配合上面的development)
    devServer: {
        static: {
            directory: path.join(__dirname, 'public'), //表示从这个文件夹里找打包后没有找到的文件（打包是打src文件夹）
        },
        hot: true,
        host: "localhost",
        port: 9999,
        open: true,
        compress: true,
        // 下面是代理相关的配置
        // proxy: {
        //     "/api": {
        //         target: "http://localhost:8888",
        //         pathRewrite: {
        //             "^/api": ""
        //         },
        //         secure: false,
        //         changeOrigin: true
        //     }
        // }
    },
})

const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require('copy-webpack-plugin');
const { merge } = require('webpack-merge');
const commonConfig = require('./webpack.common.conf');

module.exports =merge(commonConfig, {
    mode: "production", // 设置模式， development 开发阶段, 会设置development, production 准备打包上线的时候, 设置production（默认）
    plugins: [
        new CleanWebpackPlugin(),
        new CopyWebpackPlugin({
            patterns: [{
                from: "public", //设置从哪一个源中开始复制；
                // to: "./",    //复制到的位置，可以省略，会默认复制到打包的目录下；
                globOptions: { //下面配置忽略清单
                    ignore: [
                        "**/index.html"
                    ]
                }
            }]
        }),
    ]
})

!

• 作       者 : Yaopengfei(姚鹏飞)
• 博客地址 : http://www.cnblogs.com/yaopengfei/
• 声     明1 : 如有错误，欢迎讨论，请勿谩骂^_^。
• 声     明2 : 原创博客请在转载时保留原文链接或在文章开头加上本人博客地址，否则保留追究法律责任的权利。