在最初接触webpack的较长一段时间里，我（也可能很多人）都觉得webpack是专为单页应用而量身打造的，比如webpack+react、webpack+vue等，都可以近乎完美的解决各种资源的依赖加载、打包的问题。甚至css都是打包在js里去动态添加到dom文档中去。
后来想想，这么好的工具这么好的方案为什么不能用在website（普通的web站点，姑且叫做website吧）中呢？
首先对于普通的web站点，我们更倾向于将css独立出来，因为对于website来说，css还是要最先加载出来比较好。 再然后js我们也只想加载需要的部分，而不是一个大大的打包了所有js模块的包。
- website - src #代码开发目录 - css #css目录，按照页面（模块）、通用、第三方三个级别进行组织 + page + common + lib + img #图片资源 - js #JS脚本，按照page、components进行组织 + page + components + view #HTML模板 - dist #webpack编译打包输出目录，无需建立目录可由webpack根据配置自动生成 + css + js + view + node_modules #所使用的nodejs模块 package.json #项目配置 webpack.config.js #webpack配置
目录组织好，我们就可以开始撸代码了。
开发页面
在src/js/page目录下建立index.js文件，在src/view目录下建立index.html文件。入口js和模板文件名对应。
关于多页面的应用，主要是用在是用在应用配置上
webpack配置及项目打包编译 plugins: [ new webpack.ProvidePlugin({ //加载jq $: 'jquery' }), new webpack.optimize.CommonsChunkPlugin({ name: 'vendors', // 将公共模块提取，生成名为
vendors的chunk chunks: ['index','list','about'], //提取哪些模块共有的部分 minChunks: 3 // 提取至少3个模块共有的部分 }), new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath//HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个 new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值 filename: './view/index.html', //生成的html存放路径，相对于path template: './src/view/index.html', //html模板路径 inject: 'body', //js插入的位置，true/'head'/'body'/false hash: true, //为静态资源生成hash值 chunks: ['vendors', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }), new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值 filename: './view/list.html', //生成的html存放路径，相对于path template: './src/view/list.html', //html模板路径 inject: true, //js插入的位置，true/'head'/'body'/false hash: true, //为静态资源生成hash值 chunks: ['vendors', 'list'],//需要引入的chunk，不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }), new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值 filename: './view/about.html', //生成的html存放路径，相对于path template: './src/view/about.html', //html模板路径 inject: true, //js插入的位置，true/'head'/'body'/false hash: true, //为静态资源生成hash值 chunks: ['vendors', 'about'],//需要引入的chunk，不配置就会引入所有页面的资源 minify: { //压缩HTML文件 removeComments: true, //移除HTML中的注释 collapseWhitespace: false //删除空白符与换行符 } }), new webpack.HotModuleReplacementPlugin() //热加载], //使用webpack-dev-server，提高开发效率 devServer: { contentBase: './', host: 'localhost', port: 9090, //默认8080 inline: true, //可以监控js变化 hot: true, //热启动 } };
这里提出2点特别注意下
深刻理解下 webpack 的 HtmlWebpackPlugin 插件，因为文章的精髓就在这里。
一下贴一下我自己的多页面分离
/* 入口文件*/
module.exports = {
entry: {
index: './src/index.js',
app: './src/main.js'
},
/* 配置文件 */
plugins: [
new webpack.DefinePlugin({
'process.env': config.dev.env
}),
// https://github.com/glenjamin/webpack-hot-middleware#installation--usage
new webpack.optimize.OccurenceOrderPlugin(),
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
// https://github.com/ampedandwired/html-webpack-plugin
new HtmlWebpackPlugin({
filename: 'index.html',
template: 'index.html',
inject: true,
chunks:['index'] //指入口文件
}),
new HtmlWebpackPlugin({
filename: 'info.html',
template: 'info.html',
inject: true,
chunks: ['app'] //指入口文件
})
]