1> 新建文件夹webpack4-vue-demo
2> 安装依赖（命令行工具进入文件夹）
(1)初始化
cnpm init//初始化
一路默认回车即可，另外cnpm是npm的淘宝镜像( npm install -g cnpm --registry=https://registry.npm.taobao.org )
(2)安装webpack webpack-cli
cnpm i webpack webpack-cli -D
i 是install的简写，-D 是 --save-dev的简写
(3)在根目录创建index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack4-vue-demo</title>
</head>
<body>
<div id="root"></div>
</body>
</html>
(4)创建src文件夹，并在src下创建index.js
console.log("hello!webpack4-vue-demo!")
此时的工程目录是这样的
(5)进行第一次打包(命令行输入)
webpack
打包成功，结果如图
注意有个warning,意思是需要设定模式，如果不设定模式，默认为生产模式，生产模式是会压缩js代码
此时回头看工程目录，多了一个dist文件夹，webpack4在打包时默认入口文件为src目录下的index.js，输出地址为dist文件夹，文件为main.js
修改index.html的代码，然后在浏览器中打开，并且打开控制台
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack4-vue-demo</title>
</head>
<body>
<div id="root"></div>
<script src="./dist/main.js"></script>
</body>
</html>
可以看到控制台打印出了我们在index.js中写的内容
(6)安装vue, vue-loader
cnpm i vue vue-loader -D
(7)在src下创建App.vue
<template>
<div>{{msg}}</div>
</template>
<script>
export default{
data(){
return{
msg: 'hello! webpack4-vue-demo!'
}
}
}
</script>
(8)修改index.js
import Vue from 'vue'
import App from './App.vue'
new Vue({
el: "#root",
render:h=>h(App)
})
(9)第二次打包
报错：
这是由于vue-loader需要以插件的形式引入,即使安装了，但是我们需要在webpack.config.js中配置
(10)在根目录下创建webpack.config.js
const path = require('path')
const VueLoaderPlugin = require('vue-loader/lib/plugin')
module.exports = {
mode: 'development',
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
},
]
},
plugins: [
new VueLoaderPlugin()
]
}
我们在其中也配置了mode，使其为开发模式，这样在打包时就不会有warning了
(11)第三次打包
继续报错：
错误很明显了，没有vue-template-compiler，所以我们
cnpm i vue-template-compiler -D
(12)第四次打包
成功
截至目前我们的webpack4-vue-demo初步完成
网友评论