在我的 webpack 配置中，我尝试对我的生产环境和开发环境进行单独配置。我正在尝试为每个任务实现不同的 JS 文件。意思是，当我构建它时，我需要我的代码进入具有特定名称“lib.js”的生产环境，而当我运行我的开发环境时，我希望编译后的文件进入“dist”文件夹。 这是我的 webpack.config.js 文件:
const webpack = require('webpack')
const ExtractTextPlugin = require("extract-text-webpack-plugin")
let path = require('path');
let config = {
entry: [
'./src/index.js'
],
module: {
rules: [{
test: /\.jsx?$/,
exclude: /node_modules/,
use: [
'react-hot-loader',
'babel-loader'
]
},
{
test: /\.(css)$/,
use: ExtractTextPlugin.extract({
fallback: 'style-loader',
use: 'css-loader'
})
},
{
test: /\.less$/,
use:ExtractTextPlugin.extract({
use: 'less-loader'
})
},
{
test: /\.(eot|svg|ttf|woff|woff2)$/,
loader: 'file-loader',
},
{
test: /\.js$/,
exclude: /node_modules/,
use: ['babel-loader', 'eslint-loader']
}
],
},
resolve: {
extensions: ['*', '.js', '.jsx', '.css'],
},
plugins: [
new webpack.DefinePlugin({
'process.env': {
'NODE_ENV': JSON.stringify(process.env.NODE_ENV)
}
})
],
devServer: {
contentBase: './dist',
historyApiFallback: true
},
devtool : "cheap-module-source-map",
}
if (process.env.NODE_ENV === 'production') {
config.output= {
path: path.join(__dirname, '/build/'),
filename: 'lib.js',
library: ['MyLibrary'],
libraryTarget: 'umd'
};
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
new ExtractTextPlugin({
filename: 'bundle.css',
disable: false,
allChunks: true
}),
new webpack.optimize.AggressiveMergingPlugin({
minSizeReduce: 1,
moveToParents: true
})
)
} else {
config.output= {
path: path.join(__dirname, '/dist/'),
filename: 'bundle.js',
library: ['MyLibrary'],
libraryTarget: 'umd',
publicPath: '/dist/'
};
config.plugins.push(
new webpack.optimize.UglifyJsPlugin({ sourceMap: true }),
new ExtractTextPlugin({ disable: true })
)
}
module.exports = config
这些是我的脚本:
"scripts": {
"dev": "webpack-dev-server -d --env.platform=default --progress --hot",
"build": "set NODE_ENV=production && webpack -p --progress --hot"
}
实际发生的是，只有当我构建时，文件才会进入 dist 文件夹，即使我已将 NODE_ENV 参数设置为“production”。 很乐意提供帮助。 谢谢!
最佳答案
它可能是您在 NODE_ENV=production 之后的尾随空格，它可能将 NODE_ENV 设置为 production，后面有一个空格 won在你的 webpack 配置中匹配。尝试像这样在 package.json 中更改它:
"build": "set NODE_ENV=production&& webpack -p --progress --hot"
@daw 在 this 上的评论中提到了这一点所以回答。
关于node.js - Webpack 产品与开发，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/48036986/