Webpack 4.0 + Vue 的多页配置,注意 vue-loader
目前还请使用 14.2.2 版本,15版本在编译时会有问题。
package.json
{
"name": "learn",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
"author": "Author",
"license": "ISC",
"devDependencies": {
"css-loader": "^0.28.11",
"html-webpack-plugin": "^3.2.0",
"vue-loader": "^14.2.2",
"vue-template-compiler": "^2.5.16",
"webpack": "^4.6.0",
"webpack-cli": "^2.1.2",
"webpack-dev-server": "^3.1.3"
},
"dependencies": {
"vue": "^2.5.16"
}
}
webpack.config.js
var path = require('path')
var HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: {
index: './src/index.js',
about: './src/about.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
module: {
rules: [
{
test: /\.vue$/,
use: {
loader: 'vue-loader',
options: {}
}
}
]
},
resolve: {
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
},
plugins: [],
};
for (var page in module.exports.entry) {
module.exports.plugins.push(new HtmlWebpackPlugin({
filename: page + '.html',
template: './template.html',
chunks: [page]
}));
}
在项目中新建 src
目录,把 js, vue 文件放在里面就可以了。编译完成后,dist目录有两个 HTML 页面分别是 index.html,about.html,页面各自引入 index.js 和 about.js。想添加新页面,就在 webpack.config.js 的 entry 中添加。