webpack 完整配置参考

module.exports = {
    // 提供 mode 配置选项，告知 webpack 使用相应模式的内置优化
    mode: 'production',
    // 基础目录，绝对路径，用于配置中解析入口起点（entry point）和 loader 默认使用当前目录，但是推荐在配置中传递一个值
    context: 'C:\\project\\vueTest',
    // 此选项控制是否生成，以及如何生成 source map 使用 SourceMapDevToolPlugin 进行更细粒度的配置。查看 source-map-loader 来处理已有的 source map
    devtool: false,
    // 此选项可以配置是否polyfill或mock某些Node.js全局变量和模块。这可以使最初为Node.js环境编写的代码。在其他环境中允许
    node: {
        setImmediate: false,
        process: 'mock',
        dgram: 'empty',
        fs: 'empty',
        net: 'empty',
        tls: 'empty',
        child_process: 'empty'
    },
    // 默认为 ./src
    // 这里应用程序开始执行
    // webpack 开始打包
    output: {
        // path webpack 如何输出结果的相关选项
        path: 'C:\\project\\vueTest\\dist', // string
        // 所有输出文件的目标路径
        // 必须是绝对路径（使用node.js的path模块）
        filename: 'js/[name].[contenthash:8].js',
        // 入口分块(entry chunk) 的文件名称模板
        publicPath: '/',
        // 此选项决定了非入口(non-entry) chunk 文件的名称。有关可取的值的详细信息，请查看 output.filename 选项。
        chunkFilename: 'js/[name].[contenthash:8].js'
    },
    //解析 配置模块如何解析，例如，挡在ES2015中调用import "loadsh",resolve选项能够对webpack查找“loadsh”的方式取做修改
    resolve: {
        // 创建import或require的别名，来确保模块引入变得简单、例如，一些位于 src/ 文件夹下的常用模块：
        alias: {
            '@': 'C:\\project\\vueTest\\src',
            vue$: 'vue/dist/vue.runtime.esm.js'
        },
        // 自动解析确定的扩展。默认值为['.wasm', '.mjs', '.js', '.json'] 
        // 能够使用户在引入模块时不带扩展： 如import File from '../path/to/file';
        extensions: [
            '.js',
            '.jsx',
            '.vue',
            '.json'
        ],
        // 告诉webpack 解析模块时应该搜索的目录，
        // 绝对路径和相对路径都能使用，但是要知道它们之间有一点差异
        // 通过查看当前目录以及祖先路径，相对路径将类似于Node查找‘node_modules’
        modules: [
            // 模块别名列表
            'node_modules',
            'C:\\project\\vueTest\\node_modules',
            'C:\\project\\vueTest\\node_modules\\@vue\\cli-service\\node_modules'
        ]
    },
    // 这组选项与上面的resolve对象的属性集合相同，但是仅用于来解析webpack的loader包。
    resolveLoader: {
        modules: [
            'C:\\project\\vueTest\\node_modules\\@vue\\cli-plugin-eslint\\node_modules',
            'C:\\project\\vueTest\\node_modules\\@vue\\cli-plugin-babel\\node_modules',
            'node_modules',
            'C:\\project\\vueTest\\node_modules',
            'C:\\project\\vueTest\\node_modules\\@vue\\cli-service\\node_modules'
        ]
    },
    // 模块  module 决定了 如何处理项目中的不同类型的模块
    module: {
        // 防止webpakc解析哪些任何与给定正则表达式匹配的文件。忽略的文件中不应该含有important,require,define的调用，或任何其他导入机制忽略大型的libaray可以提高构建性能
        noParse: /^(vue|vue-router|vuex|vuex-router-sync)$/,
        // 模块规格 （匹配loader，解析器等选项）
        // loaders webpack可以使用loader来预处理文件。这允许你打包除javascript之外的任何静态资源,你可以使用node.js来更简单的编写自己的loader
        rules: [
            /* config.module.rule('vue') */
            {
                test: /\.vue$/,
                use: [
                    {
                        // 有一些性能开销较大的loader之前添加此loader,可以将结果缓存到磁盘里
                        loader: 'cache-loader',
                        options: {
                            cacheDirectory: 'C:\\project\\vueTest\\node_modules\\.cache\\vue-loader',
                            cacheIdentifier: 'c12e2af6'
                        }
                    },
                    {
                        // 以及 `.vue` 文件中的 `