webpack搭建vue项目的过程

1、使用npm init 初始化出package.json文件
2、安装webpack的环境
npm install webpack --save-dev
npm install webpack-cli --save-dev
3、安装所需要的插件或者依赖
安装清除和重新产生dist文件夹的插件
npm install clean-webpack-plugin --save-dev
安装生成html文件的插件
npm install html-webpack-plugin --save-dev
4、修改一些基本的配置
1）在package.json文件中的scripts加入不同环境的打包代码
“build”: “webpack --mode production”, 配置生产环境打包的命令
“dev”: “webpack --mode development” 配置开发环境的打包命令
2）在项目根目录中创建webpack.config.js文件
在文件中写入
引入path
const path = require(‘path’) //无需安装 可以直接使用
引入删除和新增dist文件夹的插件
const { CleanWebpackPlugin } = require(‘clean-webpack-plugin’)
引入自动产生html文件的插件
const htmlWebpackPlugin = require(‘html-webpack-plugin’)
3）在该js文件中写入如下代码
module.exports = {
entry: ‘入口文件的路径’,
output: {
publicPath: ‘./’, 写成./为相对路径
path: path.resolve(__dirname, ‘dist’) //定义打包生成的文件夹名称
filename: ‘打包生成的js文件的名称’
},
plugins: [
new CleanWebpackPlugin(),
new htmlWebpackPlugin({
title: ‘生成html文件的title’,
minify: {
removeComments: true, 打包后删除html文件中的注释
collapseWhitespace: true, 打包后删除换行和空格符
minifyCSS: true 压缩内联css
}
})
]
}
5、因为vue中有很多es6 代码 所以需要引入babel
安装babel的命令
npm i @babel/core babel-loader @babel/preset-env @babel/plugin-transform-runtime --save-dev
npm i @babel/polyfill @babel/runtime
之后再项目的根目录中创建.babelrc文件并在该文件中写入如下代码
{
“presets”: ["@babel/preset-env"],
“plugins”: ["@babel/plugin-transform-runtime"]
}
之后在webpack.config.js文件中加入babel-loader
moudle: {
rules: [
test: ‘/.jsKaTeX parse error: Expected 'EOF', got '}' at position 189: … ] }̲ 6、使用we…/’,
exclude: ‘/node_modules/’, // 排除依赖包文件夹
use: {
loader: ‘babel-loader’ // 使用 babel-loader
}
},
{
test: /.vue$/, // vue正则匹配规则不能加引号 不然会报错
loader: ‘vue-loader’ // 使用 babel-loader
}
]
}
}
8、在项目中创建文件夹以符合vue项目的项目解构（按照课件中的结构创建即可）
注意在main.js中写入初始渲染的vue模板
在main.js中写入
import Vue from ‘vue’
import App from ‘你的app文件所在的地址’
new Vue({
el: ‘#app’ // 注意我们额挂载点再public文件夹中的html文件中定义
render: h => h(App)
})
到这里已经可以显示出自己的第一个vue页面
9、完善vue的路由
在router文件夹下创建出主路由文件 index.js
import Vue from ‘vue’
import VueRouter from ‘vue-router’
import Page from ‘…/views/page.vue’
Vue.use(VueRouter)
const routes = [
{
path: ‘/’,
name: ‘’,
component: Page
}
]
var router = new VueRouter({
routes
})
export default router
10、将router文件导入main.js中
完善main.js为
import Vue from ‘vue’
import router from ‘./router/index’
import app from ‘./app.vue’
new Vue({
el: ‘#app’,
router,
render: h => h(app)
})