我想将两个插件加载到Webpack：extract-text-webpack-plugin和babel-minify-webpack-plugin。babel-minify-webpack-plugin仅在环境位于production中时才加载。目前，我正在根据环境标志创建envPlugin数组并推送插件。
module.exports = (env) => {
const isProduction = env === 'production';
const CSSExtract = new ExtractTextPlugin('styles.css');
const bundleJSMinifier = new MinifyPlugin();
let envPlugins = [CSSExtract];
if (isProduction) {
envPlugins.push(bundleJSMinifier);
}
return {
entry: ['babel-polyfill', './src/app.js'],
output: {
path: path.join(__dirname, 'public', 'dist'),
filename: 'bundle.js'
},
module: {
rules: [...]
},
plugins: envPlugins,
devtool: isProduction ? 'source-map' : 'inline-source-map',
devServer: {...}
};
};
问题是，有一种更好的方法可以根据我当前所处的环境将插件加载到webpack。
答案 0 :(得分：1)
您可以将您的制作和开发配置拆分为不同的文件，将常用设置放入常用文件中，然后使用{{1} }插件，将它们合并到每个环境中，如下所示：
webpack-merge
webpack.common.js const webpack = require('webpack');
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
module.exports = {
mode: 'development',
entry: __dirname + '/admin/app/frontend/entry.js',
output: {
path: __dirname + '/admin/public/compiled',
filename: 'bundle.js'
},
resolve: {
extensions: ['.js', '.jsx']
},
module: {
rules: [
{
test: /\.jsx?$/,
exclude: /node_modules/,
include: __dirname + '/admin/app/frontend/',
use: {
loader: 'babel-loader'
}
},
{
test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/,
loader: 'file-loader?name=fonts/[name].[ext]'
},
{
test: /\.(sa|sc|c)ss$/,
use: [
MiniCssExtractPlugin.loader,
'css-loader',
'sass-loader',
],
},
{
test: /\.png$/,
loader: "url-loader?mimetype=image/png"
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename: "styles.css",
}),
new webpack.ContextReplacementPlugin(/moment[\\\/]locale$/, /^\.\/(en|de)$/)
]
};
：
webpack.dev.js const merge = require('webpack-merge');
const common = require('./webpack.common.js');
module.exports = merge(common, {
devtool: 'inline-source-map',
});
webpack.prod.js，在我的const webpack = require('webpack');
const merge = require('webpack-merge');
const UglifyJSPlugin = require('uglifyjs-webpack-plugin');
const common = require('./webpack.common.js');
module.exports = merge(common, {
mode: 'production',
plugins: [
new UglifyJSPlugin({
sourceMap: true
})
]
});
中，每个环境都有特定的命令。 package.json用于开发，npm watch用于生产。它们每个都指向正确的环境文件：
npm build使用{
"name": "my-app",
"version": "1.0.0",
"description": "my app desc",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"watch": "webpack --config webpack.dev.js --watch",
"build": "webpack --config webpack.prod.js"
},
"repository": {
"type": "git",
"url": "https://repo-url"
},
"keywords": [
"bpaulino",
"bruno"
],
"engines": {
"node": "8.5.0"
},
"author": "Bruno Paulino",
"license": "ISC",
"devDependencies": {
"babel-core": "^6.25.0",
"babel-loader": "^7.1.1",
"babel-plugin-react-transform": "^2.0.2",
"babel-plugin-transform-es2015-destructuring": "^6.23.0",
"babel-plugin-transform-object-rest-spread": "^6.26.0",
"babel-plugin-transform-react-display-name": "^6.5.0",
"babel-polyfill": "^6.7.4",
"babel-preset-env": "^1.6.1",
"babel-preset-es2015": "^6.24.1",
"babel-preset-react": "^6.24.1",
"babel-preset-stage-0": "^6.24.1",
...
"webpack": "^4.16.5",
"webpack-cli": "^3.1.0",
"webpack-merge": "^4.1.0"
},
"dependencies": {
"axios": "^0.16.2",
"babel-plugin-prismjs": "^1.0.2",
"bootstrap-sass": "^3.3.7",
"history": "^4.6.3",
"lodash": "^4.17.4",
"marked": "^0.5.0",
"moment": "2.22.2",
"node-uuid": "^1.4.8",
"normalizr": "^3.2.3",
"npm": "^6.2.0",
"prismjs": "^1.15.0",
"prop-types": "^15.6.2",
"react": "^16.4.1",
...
}
}
插件，您可以覆盖通用配置中定义的所有设置。