一个网站做数据维护需要多久,安卓app快速开发,sem是什么方法,电子商务专业是干啥的webpack一步一步搭建vue项目
前提#xff1a;node、git(可选)已安装。node我使用的版本是 16.13.1。本文基本上都是基础配置#xff0c;更多特殊配置请看其他博客。
本项目包含内容#xff1a; webapck vue sass postcss babel eslint typescript
项目源码地址#xff1…webpack一步一步搭建vue项目
前提node、git(可选)已安装。node我使用的版本是 16.13.1。本文基本上都是基础配置更多特殊配置请看其他博客。
本项目包含内容 webapck vue sass postcss babel eslint typescript
项目源码地址项目源码地址 文章目录 webpack一步一步搭建vue项目1. 新建项目文件夹初始化npm git2. 安装配置webpack2.1 安装webpack webpack-cli2.2 配置webpack2.2.1 webpack配置文件2.2.2 新建src目录2.2.3 配置webpack.base.js 文件2.2.4 配置webpack.dev.js 文件2.2.5 配置启动操作 package.json2.2.6 运行测试 3. 使用 clean-webpack-plugin插件清除旧文件4. 使用 html-webpack-plugin 插件配置启动页面4.1 新建 index.html文件4.2 配置 html-webpack-plugin 插件 5. 配置 webpack-dev-server5.1 配置 webpack-dev-server5.2 配置运行5.3 测试 webpack-dev-server 6. 插件 zip-webpack-plugin 编译后生成 zip包7. 配置 vue7.1 下载 vue 与 vue-loader7.2 配置 vue-loader7.3 新建src/App.vue文件7.4 在 src/index.js 中配置vue的启动配置7.5 配置css的编译7.6 编译运行dev, 可看到vue内容 8 添加 sass postcss 环境8.1 配置 sass 环境8.2 配置 postcss 9. 添加babel配置9.1 下载babel 多个npm包9.2 配置webpack中 babel-loader, webpack.base.js中 mudule - rules中添加9.3 添加 bebel-loader的配置信息在项目根目录新建 babel.config.json。babel-loader会自动使用它9.4 配置package.json 中的编译浏览器目标, json根节点增加详细请了解 browserslist配置 10. 配置项目 eslint10.1 下载多个eslint包10.2 增加 eslint 配置文件在项目根目录新建 .eslintrc.js 文件 11. 添加 typeScript 支持。11.1 安装ts依赖11.2 webpack.base.js 添加 module - rules ts配置11.3 添加 tsconfig.json 配置文件在根目录创建该文件11.4 在增加vue全局类型在src目录下新建 env.d.ts文件11.5 babel添加ts支持11.6 eslint 添加对ts的支持11.7 在App.vue文件中测试ts, 12. 总结13. 其他配置13.1 progress-bar-webpack-plugin 插件控制台输出编译进度13.2 图片资源输出到指定目录13.3 使用 mini-css-extract-plugin 插件抽出单独css文件13.4 copy-webpack-plugin 插件编译过程中复制文件到输出目录的指定目录13.5 开发中的路径别名 1. 新建项目文件夹初始化npm git
文件夹下运行命令
npm init 初始化项目npm包管理配置。git init: 初始化项目git版本管理新建 .gitignore 文件文件内配置git忽略的文件或文件夹。
2. 安装配置webpack
2.1 安装webpack webpack-cli
npm i -D webpack webpack-cli # 我的 *webpack*: ^5.90.3 webpack-cli: ^5.1.42.2 配置webpack
2.2.1 webpack配置文件
webpack无配置文件也可运行默认加载根目录下的webpack.config.js文件这里我比较喜欢在项目根目录创建三个配置文件。
webpack.base.js: webpack基础配置。webpack.dev.js: webpack开发环境配置。webpack.prod.js: webpac正式打包环境配置。
如果使用我这种方式需要下载 webpack-merge 包用与合并webpack配置
npm i -D webpack-merge // 我用的 webpack-merge: ^5.10.02.2.2 新建src目录
目录下新建index.js文件作为程序的入口。在index.js中先随便写一个代码作为测试。
2.2.3 配置webpack.base.js 文件
const path require(path);
module.exports {entry: ./src/index.js, // 配置程序入口output: {filename: ./js/[name].[contenthash].js,, // 配置程序生成的js文件位置和名字name contenthash为webpack提供的变量字段path: path.resolve(__dirname, dist), // 配置编译生成的文件存放地址如上面 ./js/ 文件夹会放到dist目录下}
}2.2.4 配置webpack.dev.js 文件
const { merge } require(webpack-merge); // 引入 merge 方法
const baseConfig require(./webpack.base.js); // 引入base配置// 合并两个配置
module.exports merge(baseConfig, { mode: development, // 配置webpack运行模式devtool: inline-source-map, // 配置sourcemap
})2.2.5 配置启动操作 package.json
将package.json中的 “main”: “index.js”, 删掉已不需要。
配置package.json的 scripts 启动脚本
scripts: {dev: webpack --config webpack.dev.js // --config 为配置webpack运行时要加载的配置项},2.2.6 运行测试
npm run dev // 控制台运行看是否dist文件夹下生成js文件3. 使用 clean-webpack-plugin插件清除旧文件
多次运行dev就会生成多个js文件原来生成的没有删除使用clean-webpack-plugin插件可在每次运行时删除旧文件
npm i -D clean-webpack-plugin # 我的 clean-webpack-plugin: ^4.0.0,再webpack.base.js中配置 clean-webpack-plugin
const path require(path);
const { CleanWebpackPlugin } require(clean-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: ./js/[name].[contenthash].js,path: path.resolve(__dirname, dist),},plugins: [new CleanWebpackPlugin()],
}4. 使用 html-webpack-plugin 插件配置启动页面
上面配置编译后我们只能看到生成js文件没有html文件html-webpack-plugin 这个插件就是解决这个问题的该插件可以帮助我们生成index.html文件或者根据我们提供的index.html模版生成编译后的index.html文件将webpack生成的js文件引入到生成的index.html内。
npm i -D html-webpack-plugin #4.1 新建 index.html文件
在项目根目录下新建index.html文件为插件提供模版
!doctype html
html langenheadmeta charsetUTF-8 /meta nameviewport contentwidthdevice-width, initial-scale1.0 /titlewebpack/title
/headbodydiv idapp/div // 后续vue挂载点
/body/html4.2 配置 html-webpack-plugin 插件
在 webpack.base.js 下配置 其他详细配置请了解 html-webpack-plugin 插件
const path require(path);
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);module.exports {entry: ./src/index.js,output: {filename: ./js/[name].[contenthash].js,path: path.resolve(__dirname, dist),},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({filename: index.html, // 生成的文件名字template: ./index.html // 生成index.html所使用的模版})],
}再次dev运行你能看到生成了index.html文件并且html文件内插入了生成的js文件。
5. 配置 webpack-dev-server
webpack-dev-server 可以一直监控编译我们的程序有热更新的机制可以让我们一边修改代码一边查看结果。
npm i -D webpack-dev-server # 我的版本 webpack-dev-server: ^4.15.1,5.1 配置 webpack-dev-server
应为服务于开发环境所以在webpack.dev.js中配置。
const { merge } require(webpack-merge);
const baseConfig require(./webpack.base.js);module.exports merge(baseConfig, {mode: development,devtool: inline-source-map, // 配置sourcemapdevServer: {static: ./dist,open: true, // 配置运行是否就打开网页port: 8080, // 配置网页端口其他配置请参考webpack官网},optimization: {runtimeChunk: single,},
})5.2 配置运行
在package.json中配置
{scripts: {dev: webpack-dev-server --config webpack.dev.js},
}5.3 测试 webpack-dev-server
修改 src/index.js 中的代码。
window.onload () {document.getElementById(app).innerText tian;
}运行dev自动打开了项目首页页面修改innerText值可查看到修改保存后界面就会变更。
6. 插件 zip-webpack-plugin 编译后生成 zip包
一般我们项目编译后都需要生成zip包去部署所以这里提供了 zip-webpack-plugin来打包编译生成的项目 安装 zip-webpack-plugin npm i -D zip-webpack-plugin # zip-webpack-plugin: ^4.0.1zip一般用于正式环境所以配置 webpack.prod.js 文件 const { merge } require(webpack-merge);
const baseConfig require(./webpack.base.js);
const ZipPlugin require(zip-webpack-plugin);
const { name: ProjectName, version: Version } require(./package.json); // 引入项目名称与版本module.exports merge(baseConfig, {mode: production,plugins: [new ZipPlugin({ // 打包压缩filename: ${ProjectName}_${Version}.zip,// 打包的时候不要把sourcemap压缩进去zip包给出去是不安全的exclude: [/sourcemaps/],}),],
})配置product.json 配置编译正式环境 scripts: {dev: webpack-dev-server --config webpack.dev.js,build: webpack --config webpack.prod.js},运行 npm run build 打包项目
7. 配置 vue
webpack基本内容配置完毕现在来给项目配置vue开发环境。
7.1 下载 vue 与 vue-loader
npm i -S vue # vue: ^3.4.21
npm i -D vue-loader # vue-loader: ^17.4.2,7.2 配置 vue-loader
vue属于项目base配置所以在 webpack.base.js中配置。
添加 VueLoaderPlugin 配置。添加 module - rules 的 vue文件配置规则
const path require(path);
const { CleanWebpackPlugin } require(clean-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const { VueLoaderPlugin } require(vue-loader);module.exports {entry: ./src/index.js,output: {filename: ./js/[name].[contenthash].js,path: path.resolve(__dirname, dist),},plugins: [new CleanWebpackPlugin(),new HtmlWebpackPlugin({filename: index.html,template: ./index.html}),new VueLoaderPlugin(),],module: {rules: [{test: /\.vue$/,use: [vue-loader],},]},
}7.3 新建src/App.vue文件
templatediv classapp-hello{{ welcome }}/div
/template
script setup
import { ref } from vue;const welcome ref(hello vue);
/script
style
.app-hello {color: blue;font-size: 20px;
}
/style7.4 在 src/index.js 中配置vue的启动配置
import { createApp } from vue;
import App from ./App.vue;createApp(App).mount(#app);7.5 配置css的编译
编译运行dev报错忘记配置css了 webpack不能直接处理css, 它只能处理js文件其他文件需要使用loader编译使用 style-loader 与 css-loader
npm i -D style-loader css-loader # style-loader: ^3.3.4, css-loader: ^6.10.0,webpack.base.js中添加配置 rules: [{test: /\.s?css$/,use: [style-loader, css-loader],},{test: /\.vue$/,use: [vue-loader],},]7.6 编译运行dev, 可看到vue内容
8 添加 sass postcss 环境
8.1 配置 sass 环境 安装 sass sass-loader npm i -D sass sass-loader # sass: ^1.72.0, sass-loader: ^13.3.3,配置 sass-loader , 修改 webpack.base.js中的 module - rules {test: /\.s?css$/,use: [style-loader, css-loader, sass-loader],
}8.2 配置 postcss 下载 postcss-loader postcss npm i -D postcss-loader postcss postcss-preset-env
# postcss: ^8.4.36, postcss-loader: ^7.3.4, postcss-preset-env: ^9.5.2,将 postcss-loader 配置到 webpack.base.js 中的 module - rules - css配置, 注意配置顺序. {test: /\.s?css$/,use: [style-loader, css-loader, postcss-loader, sass-loader],
},插件postcss配置文件在项目根目录下创建 postcss.config.js文件 postcss-loader会自动加载 // postcss.config.js 内容 详细配置请了解postcss
module.exports {plugins: {postcss-preset-env: {} // {} 中可以填写插件的配置},
};9. 添加babel配置
babel很重要基本项目都要使用为将新js语法转换成低版本js, 详细了解 babel。
9.1 下载babel 多个npm包
npm i -D babel/core babel-loader babel/plugin-transform-runtime babel/preset-env babel/runtime-corejs3
# babel/core: ^7.24.0,
# babel/plugin-transform-runtime: ^7.24.0,
# babel/preset-env: ^7.24.0,
# babel/runtime-corejs3: ^7.24.0,
# babel-loader: ^9.1.3,9.2 配置webpack中 babel-loader, webpack.base.js中 mudule - rules中添加
{test: /\.(jsx?)$/,use: [babel-loader],exclude: /node_modules/,
},9.3 添加 bebel-loader的配置信息在项目根目录新建 babel.config.json。babel-loader会自动使用它
{presets: [[babel/preset-env]],plugins: [[babel/plugin-transform-runtime,{ corejs: 3}]]
}9.4 配置package.json 中的编译浏览器目标, json根节点增加详细请了解 browserslist配置 browserslist: [last 2 versions, 1%,iOS 10,Android 5]10. 配置项目 eslint
10.1 下载多个eslint包
npm i -D eslint eslint-plugin-vue eslint-config-airbnb-base
# eslint: ^8.57.0, eslint-config-airbnb-base: ^15.0.0, eslint-plugin-vue: ^9.23.0,这里我们增加了一个规则 eslint-config-airbnb-base 内容请自己了解
10.2 增加 eslint 配置文件在项目根目录新建 .eslintrc.js 文件
// .eslintrc.js
module.exports {root: true,extends: [eslint-config-airbnb-base,plugin:vue/vue3-recommended,],rules: {indent: [error, 4], // 缩进统一使用vue/html-indent: [error, 4],no-console: off,linebreak-style: off, // 检查LF或CRLFimport/no-extraneous-dependencies: off,import/no-unresolved: off,},
};11. 添加 typeScript 支持。
11.1 安装ts依赖
npm i -D typescript ts-loader # ts-loader: ^9.5.1, typescript: ^5.4.2,11.2 webpack.base.js 添加 module - rules ts配置
{test: /\.tsx?$/,use: [{loader: ts-loader,options: {appendTsSuffixTo: [/.vue$/],},}],exclude: /node_modules/,
},11.3 添加 tsconfig.json 配置文件在根目录创建该文件
{compilerOptions: {target: ESNext, // 指定es目标版本allowJs: true, // 是否允许jsuseDefineForClassFields: true,module: ESNext, // 指定生成那个模块代码moduleResolution: Node,strict: true, // 是否启动所有严格类型检查检测选项能用true最好新手建议falsenoImplicitAny : false, // 允许隐式any类型true不允许sourceMap: true,resolveJsonModule: true,isolatedModules: true,esModuleInterop: true,allowSyntheticDefaultImports: true, // 允许使用import方式导入lib: [ESNext, DOM],skipLibCheck: true,baseUrl: ., // paths路径解析起点paths: { // 设置路径别名 可以配置多个/*: [./src/*],},},include: [src/**/*,],
}11.4 在增加vue全局类型在src目录下新建 env.d.ts文件
declare module *.vue {import { DefineComponent } from vue;const component: DefineComponent{}, {}, any;export default component;
}11.5 babel添加ts支持
下载babel ts的转换包 npm i -D babel/preset-typescript # babel/preset-typescript: ^7.24.1,配置babel.config.json文件
presets: [[babel/preset-env],[babel/preset-typescript]
],11.6 eslint 添加对ts的支持
下载 eslint ts parser包 typescript-eslint/parser
npm i -D typescript-eslint/parser # typescript-eslint/parser: ^6.21.0,修改 .eslintrc.js 配置文件exports对象添加属性。
module.exports {root: true,extends: [eslint-config-airbnb-base,plugin:vue/vue3-recommended,],parser: vue-eslint-parser,parserOptions: {parser: typescript-eslint/parser,},rules: {indent: [error, 4], // 缩进统一使用vue/html-indent: [error, 4],no-console: off,linebreak-style: off, // 检查LF或CRLFimport/no-extraneous-dependencies: off,import/no-unresolved: off,},
};11.7 在App.vue文件中测试ts,
script setup langts12. 总结
这个项目配置已基本完成好多配置都是基础配置但也已基本满足开发项目需要更多配置需要详细了解webpack和各个功能模块的配置。下面我们将介绍一些其他的功能与使用。
13. 其他配置
13.1 progress-bar-webpack-plugin 插件控制台输出编译进度 下载 npm i -D progress-bar-webpack-plugin # progress-bar-webpack-plugin: ^2.1.0,在webpack.base.js中使用 const ProgressBarPlugin require(progress-bar-webpack-plugin);plugins: [// ·····new ProgressBarPlugin(), // 控制台编译可查看到进度
],13.2 图片资源输出到指定目录
因为使用的webpack5, 它提供了配置 asset/resource 来处理图片在webpack.base.js中 module - rules中添加配置
旧版本的webpack使用 url-loader来配置这里不再说明。
{test: /\.(png|svg|jpg|jpeg|gif)$/i,type: asset/resource,generator: {filename: images/[name].[contenthash:7][ext],},exclude: /node_modules/,// exclude: /node_modules/,// webpack 旧版本使用 url-loader// use: [{// loader: url-loader,// options: {// limit: 5 * 1024, // 小于这个时将会已base64位图片打包处理// name: ./[name].[hash:5].[ext],// outputPath: images, // 图片文件输出的文件夹// },// }],
},问题 ts开发下 无法 import Icon from “./icon.png”.
原因 ts无法识别 png等类型资源需要再 env.d.ts中添加类型说明
/* images.d.ts文件 */
declare module *.svg
declare module *.png
declare module *.jpg
declare module *.jpeg
declare module *.gif
declare module *.bmp
declare module *.tiff13.3 使用 mini-css-extract-plugin 插件抽出单独css文件
mini-css-extract-plugin 抽离每个js文件中的css内容到新的文件即通过 JS 文件中import进来的样式文件。它支持CSS和SourceMaps的按需加载。
npm i -D mini-css-extract-plugin # mini-css-extract-plugin: ^2.7.7,配置mini-css-extract-plugin, 在webpack.base.js中修改
const MiniCssExtractPlugin require(mini-css-extract-plugin);// 插件添加
plugins: [new MiniCssExtractPlugin({filename: css/[name]-[contenthash:8].css, // 顶级编译后css文件生成位置与生成名称}),
],
// module - rules中 css配置修改去掉 style-loader,改为MiniCssExtractPlugin.loader
// style-loader与MiniCssExtractPlugin.loader做了相似的工作所以可以替换掉。package.json中的style-loader依赖也可以去掉
{test: /\.s?css$/,use: [MiniCssExtractPlugin.loader,css-loader,postcss-loader,sass-loader,],
},13.4 copy-webpack-plugin 插件编译过程中复制文件到输出目录的指定目录
copy-webpack-plugin: 一般复制一些固定不变的文件到编译输出目录的指定位置
npm i -D copy-webpack-plugin # copy-webpack-plugin: ^11.0.0,在webpack.base.js 中配置 copy-webpack-plugin
const CopyWebpackPlugin require(copy-webpack-plugin); // 引入// 插件添加plugins: [new CopyWebpackPlugin({patterns: [// 从哪复制到哪 to不写表示输出到编译输出目录(dist)的根目录写表示dist下创建文件夹并复制该文件{ from: src/assets/audio, to: audio },],}),],13.5 开发中的路径别名
创建 import 或 require 的别名来确保模块引入变得更简单, 也就是让符号代替经常用到的路径
在webpack.base.js中添加配置
// 在 module.exports 对象下添加属性resolve: {alias: {: path.resolve(__dirname, src), // import时 就表示src目录js: path.resolve(__dirname, src/js),},},同时一般也在 tsconfig.json中配置路径别名和webapck中配置一样 paths: { // 设置路径别名 可以配置多个/*: [./src/*],js: [src/js/]},通常用vscode开发项目中在js代码中有时 符号无法响应你的代码跳转但运行运行正常其实缺少一个 jsconfig.json文件在项目根目录下创建 jsconfig.json文件, 配置和 tsconfig.json 类似
{compilerOptions: {baseUrl: .,paths: {/*: [src/*],js: [src/js/]},experimentalDecorators: true,jsx: preserve},exclude: [node_modules, dist]
}
