webpack多页应用
新建文件夹，目录结构如下：
然后
cd webpack-test
npm init（根目录下创建了一个pakage.json）
npm install [email protected] --save-dev（安装webpack，我这里用的是1版本）
根目录下新建webpack.config.js开始配置，参照这里
js部分的处理：
演示：在src > page > index下新建index.js随便输入一行代码，比如console.log(‘index‘),修改webpack.config.js
在命令行输入webpack，可以看到根目录下多了个dist文件夹，src/page/index/index.js被打包到了dist/index.js里面，下面我们修改哈配置文件，让他可以打包多入口的情况
这样我们已经可以分别打包了，但是如果index > index.js 和 login > index.js同时引用了一个公共js，我们也希望可以把公共的东西提取出来单独打包，这就要用到webpack的插件CommonsChunkPlugin，参考这里，注意：webpack4中已经没有这个插件
现在让index > index.js 和 login > index.js 同时 require(‘./../common.js‘)，修改配置文件:
config里面添加代码:
这里用了new webpack.optimize.CommonsChunkPlugin，所以需要在前面var webpack = require(‘webpack‘)
index > index.js：
require(‘./../common.js‘) console.log(‘index‘)login > index.js:
require(‘./../common.js‘) console.log(‘login‘)再次打包，可以看到common.js被单独打包到了base.js
html部分的处理：html-webpack-plugin
上面已经可以打包js了，如果现在我们要测试打包的内容，需要在page > view 下新建index.html,引入dist/js下面的js,我们想把html也打包到dist,按需引入自己的js,参考这里
这里要用到插件，需要安装：npm i --save-dev html-webpack-plugin 参见文档修改配置： new HtmlWebpackPlugin({ // 打包后的目标文件 filename: ‘view/index.html‘, // 要打包的目标文件 template: ‘src/view/index.html‘, inject: true, hash: true, // 表示当前html引入公共js和与当前对应的js // 需要引入哪些js chunks: [‘common‘, ‘index‘] })执行webpack,可以看到打包成功，点开dist/view/index.html：
说明打包成功，base.js和index.js都正确引入
面对多页应用，我们还经常面临多个页面头部和底部相同的情况，每个页面去写未免有点麻烦，我们可以用html-loader解决这个问题
安装:npm install html-loader --save-dev
view下新建layout文件夹,再分别新建header.html和footer.html
heder.html:
footer.html:
<div>我是footer</div>然后在index.html里面修改：
<!DOCTYPE html> <html> <head> <%= require(‘html-loader!./layout/head.html‘) %> </head> <body> index <%= require(‘html-loader!./layout/footer.html‘) %> </body> </html>再次打包，可看到：
到此，公共html也生效了，还剩下样式的处理和单独打包，，下次继续
第一次写，有些凌乱
温馨提示: 本文由Jm博客推荐，转载请保留链接: https://www.jmwww.net/file/web/42166.html
![[转]Node.js中package.json中^和~的区别](/uploads/allimg/200519/054J34453_lit.png "[转]Node.js中package.json中^和~的区别")