WebPack設定vue多頁面步驟詳解

這次帶給大家WebPack設定vue多頁面步驟詳解，WebPack設定vue多頁面的注意事項有哪些，以下就是實戰案例，一起來看一下。

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

於是就有了這個筆記：

先看看專案的結構：

##├── build

├── config
├── src
│   ├── api##│   ├── assets
│   ├── components# #│#  ├── page ─ router
│   ├── utils
│   ├── vuex
│   ├── App.vue
│   ├── main.js##n│ #n│ #│   └── 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']
}),

End恩，沒有了，就不修改什麼項目結構了，過程越複雜越容易出錯。上面webpack的設定簡單看得懂。 相信看了本文案例你已經掌握了方法，更多精彩請關注php中文網其它相關文章！

推薦閱讀：

webpack建置react開發環境步驟詳解

Nodejs全域安裝模組後找不到指令處理方法

以上是WebPack設定vue多頁面步驟詳解的詳細內容。更多資訊請關注PHP中文網其他相關文章！