vue-wabpack环境配置
2023-09-11 14:20:08 时间
-vuecomponents
-src
-components
-Header.vue
-Main.vue
-Item.vue
-Footer.vue
-public
-main.html
-css
-css.css
-imgs
-1.png
-App.vue
-main.js
-.gitignore
-package.json
-README.md
-webpack.config.js
搭建项目环境webpack
1.npm init 初始化,手动创建package.json/或者npn init
2.安装webpack, npm i webpack webpack-cli -D
3.书写webpack的配置文件(参考官方文档)webpack.config.js
//node内置核心模块,用来设置路径。
const { resolve } = require('path');
//只能使用 CommonJS 规范暴露
module.exports = {
// 入口文件配置
entry: './src/js/app.js',
// 输出配置
output: {
// 输出文件名
filename: './js/built.js',
//输出文件路径配置
path: resolve(__dirname, 'build')
// 添加 devServer 服务后需要调整输出的路径
publicPath: '/'
},
// development 与 production 开发环境(二选一)
mode: 'development'
module:{
rules:[]
}
plugins: [
]
};
4. webpack可以直接运行 npm需要配置package.json文件中scripts启动选项 npm run 去启动
"server": "webpack", 直接在本地打包生成dist文件夹
5.运行之后html和打包生成的js不会自动引用 配置插件html-webpack-plugin打包连带html文件
安装; npm i html-webpack-plugin -D
webpack配置文件
1.const HtmlWebpackPlugin = require('html-webpack-plugin');
2.new HtmlWebpackPlugin({
template: './src/public/index.html', // 设置要编译的 HTML 源文件路径
}),
3.此时npm run server, 打包文件夹dist中。index.html自动会引入main.js
6.清除打包文件目录,每次打包生成了文件,都需要手动删除,引入插件 `clean-webpack-plugin` 帮助我们自动删除上一次生成的文件
安装;npm install clean-webpack-plugin --save-dev
webpack配置文件;
1. 引入插件 const { CleanWebpackPlugin } = require('clean-webpack-plugin');
2. 配置插件 new CleanWebpackPlugin()
7.借助 Babel 可以将浏览器不能识别的新语法(ES6, ES7)转换成原来识别的旧语法(ES5),浏览器兼容性处理
安装loader;npm install babel-loader @babel/core @babel/preset-env --save-dev
配置loader;
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: "babel-loader",
options: {
presets: ['@babel/preset-env']
}
}
}
8.main.js中引入css文件; import './public/css/index.css'
9.打包 css 资源,css 文件 webpack 不能解析,需要借助 loader 编译解析
安装 loader; npm install css-loader style-loader --save-dev
webpack配置文件;
1.//解析css
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader'] //前后顺序不能颠倒
},
10. 打包样式文件中的图片资源,图片文件 webpack 不能解析,需要借助 url-loader编译解析
安装 loader; npm install file-loader url-loader --save-dev
webpack配置文件;
1.解析图片 媒体文件
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
},
11.自动编译并运行,每次修改代码都需要重新执行 webpack 命令,可以使用 webpack-dev-server 自动打包运行
安装 loader; npm install webpack-dev-server --save-dev
webpack配置文件;
1. 添加 devServer 服务后需要调整输出的路径
publicPath: '/'
2. 增加 devServer 配置
devServer: {
open: true, // 自动打开浏览器
compress: true, // 启动gzip压缩
port: 3000, // 端口号
quiet:true
},
3. npm需要配置package.json文件中scripts启动选项 npm run 去启动
"dev": "webpack-dev-server " 直接将打包文件在内存中存储
12.配置devtool 定位错误位置为原始代码的哪一行
webpack配置文件; loader中配置
devtool: 'cheap-module-eval-source-map', //设置 devtool 策略
13.安装vue ; npm i vue -S
main.js 引入vue ; import Vue from 'vue'
14.vue-loader, 解析vue文件
安装 npm install -D vue-loader vue-template-compiler
webpack配置文件;
1. 引入插件 const VueLoaderPlugin = require('vue-loader/lib/plugin')
2. //配置vue相关loader
{
test: /\.vue$/,
loader: 'vue-loader'
}
3.配置插件在plugins中,new VueLoaderPlugin()
4. 在css中修改配置//解析css
{
test: /\.css$/,
use: [ 'style-loader', 'css-loader'] //前后顺序不能颠倒
},
修改项;use: [ 'vue-style-loader', 'css-loader']
15. 在main.js引入组件APP入口文件,import App from './App.vue'
render: h => h(App) // 注册我们的App组件,并且会把App组件进行渲染,并且runtime-only版本Vue可以使用
16.webpack配置扩展名和别名
webpack配置文件;
resolve:{
extensions: [".js", ".json", ".vue"], //自动解析包含的扩展名文件,以后导入不用带扩展名
alias: {
//配置别名的地方
'@': path.resolve(__dirname, 'src'), //这个别名代表以后@就是src的绝对路径
}
}
在index.html文件中,引入css,然后运行npm run dev,样式未生效,需要添加这个css插件
webpack配置拷贝public下的css文件到list文件的css "npm install copy-webpack-plugin@5.1.1",
在webpack配置文件中引入,const CopyWebpackPlugin = require('copy-webpack-plugin');
配置插件
new CopyWebpackPlugin([{
from:'./src/public', //从原文件找到css的路径
to:path.resolve(__dirname, 'dist'),//配置的打包后的绝对路径
ignore:['index.html'] //忽略原文件public中的html文件
}])//为了把css拷贝到dist下
17. git操作
1.git init 仓库初始化
2.配置忽略文件, .gitignore
3.本地配置远程仓库的地址, git remote add origin https://github.com/xiaohigh/test2.git
4.本地提交 git add -A git commit -m 'message'
5.推送到远程 git push origin master
6.拉取远端代码 git pull
相关文章
- (尚018-第二章2.1)Vue使用vue-cli创建模板项目
- Laravel + Vue + element-ui 【前端项目一】vue 实现查看更多 5
- 【css/vue】Vue组件中对body操作样式的一种解决方案
- 【Vue】单文件的组件(.vue)代码实例
- Node+TS+Koa+vue 商城全栈(四) 配置ts开发环境
- Vue - [完整源码] 实现分类菜单 + 轮播图组合布局效果,类似左侧菜单与右侧轮播图连接在一起的效果(当鼠标移入菜单时,侧边出现子菜单列表)常见于商城系统,示例代码注释详细开箱即用!
- Vue安装及环境配置、开发工具
- Vue.js 前端项目在常见 Web 服务器上的部署配置
- vue-cli3.0多环境配置和本地跨域
- vue导入excel
- vue生命周期 created和mounted的区别
- vue 3.0 项目搭建移动端 (二) Vue-router: router-link 与 router-view keep-alive
- vue 3.0 项目搭建移动端 (八) vue.config.js 配置
- Vue 3结合element plus(问题总结一)之 table数据更新而视图不跟新
- vue组件---边界处理情况
- vue学习笔记六:Jquery VS Vue之网络请求明细对照
- vue-cli4 配置gzip文件处理、nginx配置解决vue单页面打包文件大首次加载慢的问题
- 解决vue-cli引入sass,报错:this.getResolve is not a function问题
- Vue-cli 4在vue.config.js中配置别名
- Vue CLI 4.0 关于 webpack 基本配置范例
- 浅谈Vue中的路由配置项meta
- vue父传子属性命名和封装组件命名问题(巨坑)
- Vue使用ElementUI对表单元素进行自定义校验
- 【转载】vue cli 3.0下配置开发环境下的sourcemap