1.创建webpack4-vue文件夹,进入
cd webpack4-vue
2.初始化npm
npm init -y
3.安装相关依赖
npm i -D webpack webpack-cli webpack-dev-server vue vue-loader vue-template-compiler html-webpack-plugin
4.在根目录下创建src文件夹,在src文件夹下创建 index.js app.vue 文件
index.js
import Vue from 'vue' // 引入vue
import App from './app.vue' // 引入app组件
new Vue({
render: h => h(App),
}).$mount('#app');
app.vue
<template>
<div>{{message}}</div>
</template>
<script>
export default {
data () {
return {
message: "2019-03-31"
};
}
};
</script>
5.在根目录下创建webpack.config.js文件
const path = require('path');
const { VueLoaderPlugin } = require('vue-loader');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
mode: 'development',
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader' // 处理vue
}
]
},
plugins: [
new VueLoaderPlugin(),
new htmlWebpackPlugin(),
new webpack.HotModuleReplacementPlugin(),
],
devServer: {
contentBase: './dist',
host: 'localhost',
port: 8000,
open: true,
hot: true
}
}
对于[email protected]版本,需要在webpack.config.js中添加 const { VueLoaderPlugin } = require(‘vue-loader’),否则不起作用
6.修改package.json文件
"scripts": {
"dev": "webpack-dev-server --config webpack.config.js",
"build": "webpack --config webpack.config.js"
},
7.执行 npm run dev