Question

有人可以帮助我弄清楚如何设置使用Webpack进行响应的环境吗？

这是我的package.json

"scripts": {
    "dev": "node_modules/.bin/webpack-dev-server --mode development --open --hot",
    "build:prod": "./node_modules/.bin/webpack --config webpack.prod.js --display-error-details --progress --color",
}

以下是我的webpack.config.js和webpack.prod.js文件

webpack.config.js文件的代码如下（不是我写的）

const path = require('path')
const webpack = require('webpack')
const MiniCSSExtractPlugin = require('mini-css-extract-plugin')

const config = {
    context: path.resolve('./src'),
    entry: { app: '.' },
    module: {
        rules: [
            {
                test: /\.jsx?$/,
                exclude: /node_modules/,
                loader: 'babel-loader'
            },
            {
                test: /\.less$/,
                use: [
                    { loader: MiniCSSExtractPlugin.loader },
                    {
                        loader: 'css-loader',
                        options: { modules: true }
                    },
                    'less-loader'
                ]
            },
            {
                test: /\.css$/,
                use: [
                    { loader: MiniCSSExtractPlugin.loader },
                    'css-loader'
                ]
            },
            {
                test: /\.(png|jpg|svg)$/,
                use: [
                    {
                        loader: 'url-loader',
                        options: { limit: 8192 }
                    }
                ]
            }
        ]
    },
    output: {
        filename: '[name].js',  // [name] resolves to name of bundle (e.g., app)
        publicPath: '/public/'
    },
    plugins: [
        new webpack.NoEmitOnErrorsPlugin(),
        new MiniCSSExtractPlugin({ filename: '[name].css' })
    ],
    resolve: {
        extensions: ['.js', '.jsx'],
        modules: [
            path.resolve('./src'),
            'node_modules'
        ]
    },
    target: 'web'
}

module.exports = config

webpack.prod.js文件的代码是这个

const path = require('path')

const config = require('./webpack.config')

const prodConfig = Object.assign({}, config, {
    mode: 'production',
    output: Object.assign({}, config.output, {
        path: path.resolve('./public')
    })
})

module.exports = prodConfig

我尝试了这种方法，但是不幸的是，它{@ 3}}无效

Answer 1

您的方法似乎很可靠，前段时间我创建了与您的代码非常相似的代码，但是如果需要，还允许传递其他选项。查看此解决方案是否适合您。无需更改package.json（即使我建议使用npx webpack webpack --config webpack.prod.js，也可以坚持使用webpack --config webpack.prod.js-如果该程序包是本地安装的，那么npm可以将其拾取，因此无需使用./node_modules/.bin/webpack）

webpack.config.js

module.exports = () => {
    const config = {
     // your webpack config
    }
    return config;
}

webpack.prod.js

const base = require('./webpack.config')( // there you may pass some extra arguments to your base config, if needed);

module.exports = Object.assign(
   {},
   base,
   { 
     mode: 'production',
     output: Object.assign({}, base.output, {
       path: path.resolve('./public')
     })
   }
)

Answer 2

我写了一个小博客文章here

为了在现有配置的基础上定位多环境配置，我将需要安装webpack-merge npm packge。因此，我们需要运行此命令

npm i webpack-merge --only=dev

以下是基于环境的2个webpack文件

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");

module.exports = merge(baseConfig, {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('development')
            }
        })
    ],
    watch: true
});

const merge = require('webpack-merge');
const baseConfig = require('./webpack.config.js');
const webpack = require("webpack");

module.exports = merge(baseConfig, {
    plugins: [
        new webpack.DefinePlugin({
            'process.env': {
                'NODE_ENV': JSON.stringify('production')
            }
        })
    ]
});

最后一步，我需要更新package.json中的脚本部分

"scripts": {
    "prod": "webpack -p --mode=production --config webpack.prod.js",
    "start": "webpack --mode=development --config webpack.dev.js",
}

建立反应环境

2 个答案: