Question

这是我的webpack配置，其中我尝试添加IgnorePlugin插件，以便在构建我的应用时删除语言环境。但是当执行＆＃34; npm run build＆＃34;为了编译生成版本，我无法从瞬间删除语言环境。什么可能出错？

index.js文件

'use strict'
// Template version: 1.3.1
// see http://vuejs-templates.github.io/webpack for documentation.

const path = require('path')
var webpack = require("webpack");
module.exports = {
    dev: {

        // Paths
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',
        proxyTable: {},

        // Various Dev Server settings
        host: 'localhost', // can be overwritten by process.env.HOST
        port: 8080, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
        autoOpenBrowser: false,
        errorOverlay: true,
        notifyOnErrors: true,
        poll: false, // https://webpack.js.org/configuration/dev-server/#devserver-watchoptions-


        /**
         * Source Maps
         */

        // https://webpack.js.org/configuration/devtool/#development
        devtool: 'cheap-module-eval-source-map',

        // If you have problems debugging vue-files in devtools,
        // set this to false - it *may* help
        // https://vue-loader.vuejs.org/en/options.html#cachebusting
        cacheBusting: true,

        cssSourceMap: true
    },

    build: {
        // Template for index.html
        index: path.resolve(__dirname, '../dist/index.html'),

        // Paths
        assetsRoot: path.resolve(__dirname, '../dist'),
        assetsSubDirectory: 'static',
        assetsPublicPath: '/',

        plugins: [
            new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)
        ],

        /**
         * Source Maps
         */

        productionSourceMap: true,
        // https://webpack.js.org/configuration/devtool/#production
        devtool: '#source-map',

        // Gzip off by default as many popular static hosts such as
        // Surge or Netlify already gzip all static assets for you.
        // Before setting to `true`, make sure to:
        // npm install --save-dev compression-webpack-plugin
        productionGzip: false,
        productionGzipExtensions: ['js', 'css'],

        // Run the build command with an extra argument to
        // View the bundle analyzer report after build finishes:
        // `npm run build --report`
        // Set to `true` or `false` to always turn it on or off
        bundleAnalyzerReport: process.env.npm_config_report
    }
}

prod.env.js文件

'use strict'
module.exports = {
  NODE_ENV: '"production"'
}

dev.env.js

'use strict'
const merge = require('webpack-merge')
const prodEnv = require('./prod.env')

module.exports = merge(prodEnv, {
  NODE_ENV: '"development"'
})

Answer 1

根据Github上的这个帖子，官方文档指出：https://github.com/moment/moment/issues/2373

您可以尝试ldrick回答：

这些是我的webpack.config.js中的相关部分。

const path = require("path");
const webpack = require("webpack");

module.exports = () => {
    return {
        // ...
        resolve: {
            // Use src Moment.js to be optimized and packed.
            alias: {
                moment$: "moment/src/moment",
            },
        },
        // ...
        plugins: [
            // Switch context for Moment.js locales.
            new webpack.ContextReplacementPlugin(/^\.\/locale$/, context => {
                // Don't touch anything else then "moment".
                if (!/\/moment\//.test(context.context)) {
                    return;
                }
                // Working with "moment/src/moment" instead of "moment" requires
                // redirecting "./locale" back to "../../locale".
                Object.assign(context, {
                    // Want all locales, enable this line.
                    // regExp: /^\.\/\w+/,
                    // Just use some locales, enable this line.
                    // regExp: /de|fr|hu/,
                    // Don't use any locales except default "en".
                    regExp: undefined,
                    request: "../../locale",
                });
            }),
            // ...
        ],
        // ...
    };
};

或者尝试代替new webpack.IgnorePlugin(/^\.\/locale$/, /moment$/)这个表达式（似乎是不在构建时导入locates文件的工作）：

new webpack.ContextReplacementPlugin(
      /moment[\/\\]locale$/,
      /en|de|fr|es|pl|ua|ru/
    ),

（根据您使用的内容更改langs。）

希望它有所帮助，或至少给你一些启发！

Vue webpack模板忽略了插件

1 个答案: