这个配置生成出来的代码只能支持ES6的浏览器下正常显示。
npm init -y
npm install vue-loader vue-template-compiler vue-style-loader css-loader webpack webpack-cli webpack-dev-server html-webpack-plugin --save-dev
npm install vue --save
const path = require('path');
const VueLoaderPlugin = require('vue-loader/lib/plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const config ={
entry: {
app: './src/main.js'
},
output: {
filename: '[name].[hash].js',
path: path.resolve(__dirname,'dist')
},
resolve:{
extensions: ['.js','.vue']
},
devServer: {
contentBase: './dist',
hot: true
},
module:{
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
{
test: /\.css/,
loader: ['vue-style-loader','css-loader']
}
]
},
plugins:[
new VueLoaderPlugin(),
new HtmlWebpackPlugin({
filename: 'index.html',
template: './src/index.html',
inject: true,
hash: true
}),
]
};
module.exports = config;//千万千万别忘了这一行
一直提示can't resolve 'App',解决办法
在main.js里,import App from "./App";用相对路径就可以了。
环境搭建:
refer: https://www.jianshu.com/p/87b48e29773c