Webpack2 完整踩坑教程(四)

本文基于NODEJS环境，nodejs的安装参考线上的流程：https://nodejs.org/en/ 。

Webpack的核心哲学思想
1.一切都是模块——就像js文件可以视作“模块”一样，其他所有的一切（CSS，图片，HTML）都可以被视作模块，通过require加载。。
2.模块加载器会把所有的模块最终打包生成一个巨大的“bundle.js”文件，并且会一直不停进行加载！所以Webpack通过大量的特性去分割你的代码，生成多个“bundle”片段，并且异步地加载项目的不同部分。

四.生产环境和开发环境

在入口处区分生产环境和开发环境。
1.修改package.json的script项，通过set NODE_ENV来设置环境变量

"scripts": {
"build": "rimraf dist && set NODE_ENV=production&& webpack",
"dev": "set NODE_ENV=development&& node dev-server.js"
},

2.修改webpack.config.js，在入口处添加NODE_ENV环境判断使用生产环境还是开发环境的入口文件及插件。process.env.NODE_ENV可以获取到启动文件的环境变量，nodejs的app.get(‘env’)也可以取得。

var path=require('path');// 导入路径包
var webpack=require('webpack');
var DEVELOPMENT=process.env.NODE_ENV==='development';
var PRODUCTION=process.env.NODE_ENV==='production';
var entry=PRODUCTION
? ['./src/index.js'] : [
'./src/index.js',
'webpack/hot/dev-server',//开启热重载 hot
'webpack-dev-server/client?http://localhost:8080'//添加webpack-dev-server客户端
];
var plugins=PRODUCTION ? [] : [
new webpack.HotModuleReplacementPlugin()//全局开启代码热替换 如果是CLI这里则不用写
];
module.exports={
entry:entry,//入口文件
plugins:plugins,
output:{
path:path.join(__dirname,'dist'),// 指定打包之后的文件夹
publicPath:'/dist/',// 指定资源文件引用的目录
filename:'bundle.js'// 指定打包为一个文件 bundle.js
}
}


3.然后分别运行npm run dev 和npm run build查看，没毛病。