var webpack = require("webpack"); ... var HtmlWebpackPlugin = require('html-webpack-plugin'); var deps = [ 'react/dist/react.min.js', 'react-dom/dist/react-dom.min.js' ]; var config = { ... resolve:{ alias:{}, fallback:path.join(__dirname, "node_modules") }, ... module:{ ... noParse:[] } } /*当加载多个压缩文件时，下述方法更优雅简便*/ deps.forEach(function(dep){ var depPath = path.resolve(node_modules, dep); //path.dep是路径分隔符。 config.resolve.alias[dep.split(path.dep)[0]] = depPath; config.module.noParse.push(depPath); }); module.exports = config;
二、分离应用和第三方文件
当你的应用依赖其他库尤其是像 React JS 这种大型库的时候，需要考虑把这些依赖分离出去，这样就能够让用户在你更新应用之后不需要再次下载第三方文件。上述配置文件中的entry里添加了第三方包vendors，其值为要分离打包的文件。运行配置后会在dist/js下生成三个独立文件：app.js、mobile.js、vendors.js。注意在页面中药引入vendors.js
<script src="https://www.jb51.net/dist/vendors.js"></script> <script src="https://www.jb51.net/dist/app.js"></script>
三、多重入口
当应用有多个页面， 页面之间虽然有共享代码，但是不想在页面中加载所有代码时可以定义多重入口。例如配置文件中的app.js针对pc端页面，mobile.js仅针对移动端页面，output的filename：'js/[name].[chunkhash:8].js',采用了文件名变量，这样在dist/js中可生成与源文件同名的文件。
四、优化缓存及懒加载
在生产环境中，将输出文件名添加hash值，目的是在文件更改时强制客户端重新加载这个文件，而未改变的文件继续使用缓存文件。常用的有hash和chunkhash。配置文件中的[chunkhash:8]即截取8位chunkhash值。
webpack的编译理念：webpack将style视为js的一部分，所以在计算chunkhash时，会把所有的js代码和style代码混合在一起计算。比如entry.js引用了main.css：
import 'main.css'; alert('I am main.js');
webpack计算chunkhash时，以entry.js文件为编译入口，整个chunk的内容会将main.css的内容也计算在内。所以，不论是修改了js代码还是css代码，整个chunk的内容都改变了，计算所得的chunkhash随之改变。但理想情况下是想css或js内容改变时仅影响自身文件的chunkhash，这样客户端只需更新一部分文件。解决此问题首先要将css单独编译输出文件，因为正常情况下webpack会把js文件中引入的css文件编译输出到html页面的<style></style>标签中。
1.使用extract-text-webpack-plugin单独编译输出css文件
安装extract-text-webpack-plugin，
npm install extract-text-webpack-plugin --save-dev
然后在配置文件中引入插件，
//webpack.production.config.js var ExtractTextPlugin = require('extract-text-webpack-plugin');
该插件除了chunkhash还提供了另外一种hash值contenthash。顾名思义，contenthash代表的是文本文件内容的hash值，也就是只有style文件的hash值。此hash是可解决上述问题的关键所在。上述配置文件使用了contenthash：
//webpack.production.config.js new ExtractTextPlugin("css/[name].[contenthash:8].css"),//设置其路径(路径相对于path)
2.使用使用webpack-md5-hash解耦css和js文件hash值
再考虑以下情况，只修改了main.css文件，未修改entry.js文件，编译输出的js文件hash是否改变？答案是改变了，因为上文提到的webpack的编译理念，webpack将style视为js的一部分，所以在计算chunkhash时，会把所有的js代码和style代码混合在一起计算。解决办法是使用webpack-md5-hash插件：
//webpack.production.config.js var WebpackMd5Hash = require('webpack-md5-hash'); ... new WebpackMd5Hash();
它的作用是生成具有独立hash值的css和js文件，即css和js文件hash值解耦。webpack-md5-hash插件对chunk-hash钩子进行捕获并重新计算chunkhash，它的计算方法是只计算模块本身的当前内容（包括同步模块）。
3.主文件使用hash代替chunkhash解决异步加载模块改变时主文件hash不改变