webpack搭建vue项目的过程

向右看齐 2023-07-10 14:29 13阅读 0赞

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)  
\})