响应式建站网站,网站建设 标书,南京华夏商务网做网站怎么样,美篇app制作教程前言
虽然在实际项目当中很少会从 0 到 1 配置一个项目#xff0c;毕竟很多重复工作是没有必要的#xff0c;脚手架将这些重复性的工作进行了整合#xff0c;方便开发者使用。也正因如此#xff0c;导致部分开发者过于依赖脚手架#xff0c;却不清楚其内部的实现流程毕竟很多重复工作是没有必要的脚手架将这些重复性的工作进行了整合方便开发者使用。也正因如此导致部分开发者过于依赖脚手架却不清楚其内部的实现流程因此通过从 0 到 1 去配置和搭建项目可以更好的理解开发中使用的脚手架都帮我们做了哪些事情。
准备工作
创建目录结构
这里直接使用 npm init vitelatest命令生成 vue3 最新的目录结构 当然需要对这个目录进行一些调整
将 vite.config.js 换成 webpack.config.js因为我们要基于 webpack5 对项目进行编译构建初始化新的 package.json原本的 package.json 依赖了一些我们不需要的内容因此直接删除重新初始化去除 index.html 中的 script typemodule src/src/main.js/script因为这是 vite 需要的但 webpack 并不需要
下面是调整后的目录结构 安装基本依赖
下面列出了需要的一些基本依赖其他的依赖在后面需要的时候在进行安装
npm install vuenextnpm install webpack webpack-cli webpack-dev-server -D
对 webpack 进行基本配置
// webpack.config.jsconst path require(path)module.exports {entry: {path: ./src/main.js},output: {filename: assets/js/[name].[contenthash:6].js,path: path.resolve(__dirname, ./dist)}
}在 package.json 中创建脚本
// package.jsonscripts: {dev: webpack server --modedevelopment,build: webpack --modeproduction}针对不同文件类型进行配置 webpack
启动项目
完后以上准备工作之后我们就可以通过 npm run dev 命令来启动项目但是你会发现这样的错误 其实就是 webpack 不能认识 .vue 文件它需要我们提供一个 loader 对其进行处理这个 loader 就是官方文档中提到的 其中 vitejs/plugin-vue 这个是 vite 才需要的因此我们只需要 vue-loadernext、vue/compiler-sfc 注意vue-loader 默认是处理 vue2 的这里使用的是 vue3所以要安装 vue-loadernext 在 webpack中处理 .vue 文件
首先通过 npm install vue-loadernext vue/compiler-sfc -D 安装需要的依赖然后在 webpack.config.js 中进行配置
// webpack.config.jsconst path require(path)
const { VueLoaderPlugin } require(vue-loader)module.exports {entry: {path: ./src/main.js},module: {rules: [{test: /\.vue$/,use: vue-loader}]},output: {filename: assets/js/[name].[contenthash:6].js,path: path.resolve(__dirname, ./dist)},plugins: [new VueLoaderPlugin(),]
}配置完成之后我们在通过 npm run dev 启动项目不出意外的你将得到下面的错误 显然 webpack 也不认识 style/style 中样式相关的内容这一点大家都知道那肯定是要使用 style-loader 和 css-loader
在 webpack中处理 style/style 样式相关的内容
首先通过 npm install style-loader css-loader -D 安装需要的依赖然后在 webpack.config.js 中进行配置
// webpack.config.jsconst path require(path)
const { VueLoaderPlugin } require(vue-loader)module.exports {entry: {path: ./src/main.js,},module: {rules: [{test: /\.vue$/,use: vue-loader,},{test: /.css$/,use: [style-loader, css-loader],},],},output: {filename: assets/js/[name].[contenthash:6].js,path: path.resolve(__dirname, ./dist),},plugins: [new VueLoaderPlugin(),]
}配置完成之后又一次通过 npm run dev 启动项目不出意外的你将又一次得到下面的错误 意思就是说 webpack 仍然无法识别图片类型的文件如.(png|jpg|jpeg|gif) 等那么到了这里相信你灵光一闪想到了需要使用 file-loader/url-loader但在这我们不需要配置这两个 loader因为我们使用的是 webpack5 是时候使用其中 资源模块(asset module) 的模块类型了.
配置 webpack 资源模块
废话不多说直接上官方文档使用说明
下面就是配置后的 webpack.config.js 内容
const path require(path)
const { VueLoaderPlugin } require(vue-loader)module.exports {entry: {path: ./src/main.js,},module: {rules: [{test: /\.vue$/,use: vue-loader,},{test: /\.css$/,use: [style-loader, css-loader],},{test: /\.(png|jpe?g|gif)$/,type: asset/resource,generator: {filename: assets/img/[hash][ext]}}],},output: {filename: assets/js/[name].[contenthash:6].js,path: path.resolve(__dirname, ./dist),},plugins: [new VueLoaderPlugin()]
}这时候在通过 npm run dev 启动项目发现终于没有报错了 此时访问页面内容 是不是会觉得 别慌问题不大其实就是没有给 webpack 打包后的 js 代码指定模板.
为 webpack 指定模板
熟悉 webpack 的你肯定猜到要是用 html-webpack-plugin 插件首先通过 npm install html-webpack-plugin -D 安装依赖然后配置 webpack.config.js 文件
const path require(path)
const { VueLoaderPlugin } require(vue-loader)
const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {entry: {path: ./src/main.js,},module: {rules: [{test: /\.vue$/,use: vue-loader,},{test: /\.css$/,use: [style-loader, css-loader],},{test: /\.(png|jpe?g|gif)$/,type: asset/resource,generator: {filename: assets/img/[hash][ext]}}],},output: {filename: assets/js/[name].[contenthash:6].js,path: path.resolve(__dirname, ./dist),},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: path.resolve(__dirname, ./index.html)})]
}此时在重新通过 npm run dev 启动项目并访问页面: 至此终于成功配置了一个简单的基于 vue3 和 webpack5 的项目.
优化配置文件
通过 F12 打开页面控制台你会看到这么一段警告信息 其中 __VUE_OPTIONS_API__ 和 __VUE_PROD_DEVTOOLS__ 对应的值都是 Boolean 类型分别代表的是
__VUE_OPTIONS_API__表示是否支持 options api 的写法默认是 true__VUE_PROD_DEVTOOLS__表示生产包是否要继续支持 devtools 插件默认是 false
即便它们都有默认值可以不进行设置但是 Vue 希望我们自己去设置这两个配置毕竟如果完全拥抱 Vue3 的话写法上没有必要在使用 options api 的格式这样在打包的时候包的体量上也会有所减少.
const path require(path)
const { VueLoaderPlugin } require(vue-loader)
const HtmlWebpackPlugin require(html-webpack-plugin)
const { DefinePlugin } require(webpack)module.exports {entry: {path: ./src/main.js,},module: {rules: [{test: /\.vue$/,use: vue-loader,},{test: /\.css$/,use: [style-loader, css-loader],},{test: /\.(png|jpe?g|gif)$/,type: asset/resource,generator: {filename: assets/img/[hash][ext],},},],},output: {filename: assets/js/[name].[contenthash:6].js,path: path.resolve(__dirname, ./dist),},plugins: [new VueLoaderPlugin(),new HtmlWebpackPlugin({template: path.resolve(__dirname, ./index.html),}),new DefinePlugin({__VUE_PROD_DEVTOOLS__: false,__VUE_OPTIONS_API__: false,}),],
}最后
首先通过 npm run build 查看打包后生成为目录结构 目前存在的不足
js 文件没有进行抽取现在所有的 js 内容都会默认打包到 main.hash.js 中css 样式相关的内容没有进行抽取现在的样式全部以 style/style 标签的形式插入在 html 文件中没有对 css 进行兼容处理没有对 js 进行兼容处理没有很好的区分各个环境如开发、测试、生产…
当然也有对应的处理方式
通过 webpack 的 optimization 选项配置抽离对应的 js通过 mini-css-extract-plugin 插件来抽离对应的 css通过 postcss 对 css 进行处理通过 babel 对 js 进行处理针对公共配置部分进行抽取或者通过环境变量去合成最终的配置项···
以上的这些就不在一一进行配置在需要时在进行相应配置即可.
至此我们成功的将基于 vite vue3 项目转换成了基于 webpack5 vue3 的项目.
