在我的webpack配置中,我尝试对我的prod和dev环境进行单独配置。我正在尝试为每个任务实现不同的JS文件。这意味着,当我构建它时,我需要我的代码转到具有特定名称“lib.js”的prod环境,当我运行我的Dev环境时,我希望编译的文件转到“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”。 很乐意提供帮助。 谢谢!
答案 0 :(得分:1)
它可能是NODE_ENV=production
之后的结尾空间,可能会将NODE_ENV
设置为production
,其中的空格将在webpack
配置中不匹配。尝试在package.json中更改它,如下所示:
"build": "set NODE_ENV=production&& webpack -p --progress --hot"
@daw在this SO回答的评论中提到了这一点。