1. resolve对象增加,方便.vue等文件import时省略后缀名书写
resolve: {
extensions: ['*', '.js', '.vue']
},
2. webpack配置文件中引入 vue-loader vue-style-loader css-loader
module对象增加rules配置,对.vue文件配置,对vue文件中style样式的配置
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css$/,
use: [
'vue-style-loader',
'css-loader'
]
},
]
},
3. webpack配置文件中引入
const VueLoaderPlugin = require('vue-loader/lib/plugin')
plugins中追加 new VueLoaderPlugin()
plugins: [
new HtmlWebpackPlugin({ // 打包输出HTML
title: 'Hello World app',
minify: { // 压缩HTML文件
removeComments: true, // 移除HTML中的注释
collapseWhitespace: true, // 删除空白符与换行符
minifyCSS: true// 压缩内联css
},
filename: './index.html',
template: path.resolve(__dirname, 'src/index.html'),
// inject: true
}),
new VueLoaderPlugin()
]
4. 在weback配置指定的入口文件中 配置将Vue对象实例化
附上git地址 https://github.com/xss392795158/test-vue 内有webpack配置可参考
npm install
npm start
访问本地端口3001