webpack2.0增加了对ES6模块的支持，无需额外的配置，并且可以与 AMD 和 CommonJS混用。webpack 2可以分析理解所有的ES6代码并且只在检测到是ES6模块时才使用tree-shaking。然而，只有import导入和export导出的模块才会被编译为ES5，如果希望所有的打包文件都编译为ES5，你需要使用一个转译器来处理剩下来的文件。这里我使用babel。首先安装babel：
npm install --save-dev babel-core babel-loader babel-preset-es2015
在根目录下添加.babelrc文件，并添加配置
如果bable的配置仍然为：
{ presets: ['es2015'] }
那么无用的代码也会被打包（Babel会将ES 6模块通过commonJs模块转换输出，然后webpack 2就不能进行tree-shaking分析了）。这块儿大致原理是这样的。。。
因此我们将配置文件改为：
{ "presets": [ ["es2015", {"modules": false}] ] }
并且在webpack的配置文件中加入如下loader（此处一定不能用use，不知道为啥）
{ test: /\.js$/, loader: 'babel-loader', //此处不能用use，不知道为啥 exclude: /node_modules/ //需要排除的目录 }
九、热加载模块（HMR）
webpack配置文件中，devServer的“inline”选项会为入口页面添加“热加载”功能，“hot”选项则开启“热替换（Hot Module Reloading）”，即尝试重新加载组件改变的部分（而不是重新加载整个页面）。如果两个参数都传入，当资源改变时，webpack-dev-server将会先尝试HRM（即热替换），如果失败则重新加载整个入口页面。要使用HRM，首先需要在webpack配置文件中配置plugin：
plugins: [ ... new webpack.HotModuleReplacementPlugin() // 热加载插件 ]
到这一步，实际上改变css可以实现hrm，然而js只会刷新整个页面，index.html直接不刷新了。。。不知道为啥。react可以通过react-transform-hrm来搞定。非react框架现在考虑用webpack-dev-middleware 来尝试一下
十、生产环境
通过以上步骤基本的开发环境就搭建完毕了，那么实际上在生产环境里可能会有其他的要求，例如分离js与css（目前css是打包到js中去的），例如压缩代码等。
首先创建一个webpack.production.config.js,然后在package.json中配置修改为：
"scripts": { "start": "webpack-dev-server", "build": "set NODE_ENV=production&&webpack --config ./webpack.production.config.js" }
当运行 npm run build 的时候，会设置环境变量"NODE_ENV"为"production"。
var prod = process.env.NODE_ENV === 'production' ? true : false;
现在分别介绍几个常用的插件：
1.提取公共模块插件（webpack内置） CommonsChunkPlugin
2.压缩js插件（webpack内置） UglifyJsPlugin
3.分离css文件： ExtractTextPlugin 注意该插件由于和webpack2不兼容，需要指定版本。。在webpack.production.config.js 中的配置，注意与1.x版本loader的写法不同。
4.清除文件夹： clean-webpack-plugin
运用[hash]使得产生的文件名带有哈希值，合理使用缓存。
项目地址： https://github.com/Dyzzi/webpack-demo-project
本地下载：点击这里
总结
以上就是这篇文章的全部内容了，至此大致的开发以及生产环境已经搭建完毕。希望本文的内容对大家的学习或者工作能带来一定的帮助，如果有疑问大家可以留言交流，谢谢大家对脚本之家的支持
您可能感兴趣的文章: