目录结构
搞了一晚上没搞好,不用hot-loader可以运行
在plugins中添加
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
按理说设置了这个plugin,webpack会把代码中的process.env.NODE_ENV替换成字符串,是不是在没有用webpack处理的代码中用了process.env.NODE_ENV。
你可以试试用cross-env插件。
package.json的scripts中添加
"testnv":"cross-env NODE_ENV=development node test1.js"
test1.js
console.log(process.env.NODE_ENV);
我的webpack配置是这样的,webpack-dev-server可以实现热加载的效果,不用在配置react-hot-loader了。
var webpack = require("webpack");
var path = require("path");
var config = {
entry: './js/index.js',
output: {
path: './js/build/',
filename: 'bundle.js',
publicPath: '/js/build/',
chunkFilename: "[id].bundle.js"
},
module: {
loaders: [
{
test: /\.js$/,
include: [
path.resolve(__dirname, "js")
],
exclude: [
path.resolve(__dirname, "js/build"),
path.resolve(__dirname, "node_modules")
],
loader: 'babel-loader',
query: {
presets: ['es2015', 'react'],
plugins: ['transform-object-assign']
}
}
]
},
plugins: []
};
var env = process.env.NODE_ENV;
console.log("node env: \x1b[32m" + env + "\x1b[0m");
if (env === 'production') {
// 将代码中的process.env.NODE_ENV替换为production,方便webpack压缩代码
config.plugins.push(
new webpack.DefinePlugin({
"process.env": {
NODE_ENV: JSON.stringify("production")
}
})
);
// 开启sourcemap
config.devtool = "source-map";
// // 开启文件hash //暂不使用,上线时再开启
// config.output.filename = "[hash].bundle.js";
// config.output.chunkFilename = "[id].[hash].bundle.js";
}
module.exports = config;
可能我发现了原因了,就是我的webpack之前就不会watch的,watch改了代码都没反应,所以server用我打包的错误代码一直运行,现在没那个报错了,但是我改了也没update
啊啊啊,我终于知道问题了,太TM坑爹了,其实我一开始就有想过这个问题。怪就怪这node_modules动则上10W个文件的搞得我没去换目录试试。
C:\Program Files (x86)\ 我项目在这里面,而目录里面有空格!
我找到一个测试工具https://github.com/webpack/watchpack 我在其他目录试测试能跑通,就这个TM的带空格的目录基本都没跑通!
浪费了我1整天时间当买个教训。