WebPack虐我千百遍，我帶她如初戀。一個項目前臺頁面寫差不多了，webpack幾乎零配置，也算work起來了。現在需要編寫后臺管理界面，另起一個單獨的項目，那是不存在的。于是網上了搜了大把大把的文章，很多都是修改了項目的結構，討厭，vue-cli搞的那一套，干嘛要修改來修改去的。像我這種前端小萌新，webpack的配置改著就把前臺部分run不起來了。。。

于是就有了這個筆記：

先看看項目的結構：

├── build
├── config
├── src
│   ├── api
│   ├── assets
│   ├── components
│   ├── pages
│   ├── router
│   ├── utils
│   ├── vuex
│   ├── App.vue
│   ├── main.js
│   ├── admin.js
│   └── Admin.vue
├── static
│   └── images
├── README.md
├── admin.html
├── index.html
├── package.json
└── yarn.lock

我相信這樣的結構大家一定很熟悉，除了 admin.html 和src文件夾下面的 Admin.vue 、 admin.js ，還有一些api，pages，vuex等文件夾，就是最常見的一個vue-cli初始化的項目結構。

我想要就是新增一個后臺管理界面的入口admin.html，其他能夠共用的還是共用，進入正題：

修改webpack的配置文件

修改 webpack.base.conf.js

打開 ~/build/webpack.base.conf.js ，找到entry，添加多入口:

entry: { app: './src/main.js', admin: './src/admin.js' //新增},

這樣運行編譯的時候，每一個入口都會對應一個chunk。

run dev配置的修改

打開 ·~/build/webpack.dev.conf.js· ，在plugins下找到 HtmlWebpackPlugin ，在其后面添加對應的多頁，并為每個頁面添加Chunk配置如下:

new HtmlWebpackPlugin({ filename: 'index.html', //生成的html template: 'index.html', //來源html inject: true,  chunks: ['app']//需要引入的Chunk，不配置就會引入所有頁面的資源}),new HtmlWebpackPlugin({ filename: 'admin.html', template: 'admin.html', inject: true, chunks: ['admin']}),

run build配置的修改

修改config/index.js

打開 ~/config/index.js ，找到build下的 index: path.resolve(__dirname, '../dist/index.html') ，在其后添加多頁:

admin: path.resolve(__dirname, '../dist/admin.html'),

修改 webpack.prod.conf.js

打開 ~/build/webpack.prod.conf.js ，在plugins下找到 HtmlWebpackPlugin ，在其后面添加對應的多頁，并為每個頁面添加Chunk配置:

new HtmlWebpackPlugin({ filename: config.build.index, template: 'index.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true // more options: // https://github.com/kangax/html-minifier#options-quick-reference }, // necessary to consistently work with multiple chunks via CommonsChunkPlugin chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'app']}),new HtmlWebpackPlugin({ filename: config.build.admin, template: 'admin.html', inject: true, minify: { removeComments: true, collapseWhitespace: true, removeAttributeQuotes: true }, chunksSortMode: 'dependency', chunks: ['manifest', 'vendor', 'admin']}),