学习了webpack后，总是感觉没有用武之地，写vue文件也是通过vite脚手架的形式进行建立，因此，本篇从0-1使用webpack进行搭建vue项目。
新建文本
npm init -y 新建package.json文件
tsc --init 新建tsconfig.json文件
我们还可以新建一个public文件夹，上面存在index.html,src文件夹下存在APP.vue（类vite脚手架结构）
新建webpack.config.js配置文件
安装npm install webpack和npm install webpack-cli
安装npm install webpack-dev-serve 启动webpack
vue的引入
新建一个env.d.ts文件在src文件夹下（让ts可以识别.vue后缀的文件）
declare module "*.vue"{
import { DefineComponent } from "vue";
const component: DefineComponent<{}, {}, any>;
export default component;
}
下载安装vue，npm install vue
在main.ts下配置如下文件
import {createApp} from "vue"
import APP from "./APP.vue"
createApp(APP).mount("#app")
注意:此时已经在html文件下创建一个id为app的挂载点进行挂载
webpack的简单配置
在package.json文件中配置启动命令
"build":"webpack",
"dev":"webpack-dev-server"
接着需要下载一些webpack的使用插件
npm install --save-dev html-webpack-plugin
npm i vue-loader
npm i @vue/compiler-sfc //解析vue文件
npm install --save-dev css-loader
npm install --save-dev style-loader
npm install typescript
我们来看webpack.config.json中的代码
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const {VueLoaderPlugin} = require('vue-loader/dist/index');
module.exports = {
entry:'./src/main.ts',
mode:'development',
resolve:{
alias:{
"@":path.resolve(__dirname,"src")
}
},
module:{
rules:[
{
test:/\.vue$/,
use:'vue-loader'
},
{
test:/\.css$/,
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.ts$/,
use:'ts-loader',
options:{
configFile:path.resolve(process.cwd(),"tsconfig.json"),
appendTsSuffixTo:[/\.vue$/]
}
}
]
},
output:{
filename:"[fullhash].js",
path:path.resolve(__dirname,"dist"),
clean:true
},
plugins:[
new HtmlWebpackPlugin({
template:'./public/index.html'
}),
new VueLoaderPlugin()
]
}
我们简单解释一下这段代码：
引入模块
const path = require('path');：引入 Node.js 的path模块，用于处理文件路径，方便在配置中指定各种文件和目录的路径.const HtmlWebpackPlugin = require('html-webpack-plugin');：引入html-webpack-plugin插件，该插件可以根据指定的模板文件自动生成 HTML 文件，并将打包后的 JavaScript 和 CSS 等资源自动引入到 HTML 中，方便在浏览器中运行项目.const {VueLoaderPlugin} = require('vue-loader/dist/index');：引入vue-loader的VueLoaderPlugin，用于处理.vue文件，使 Webpack 能够正确地解析和打包 Vue 组件5.
入口配置
entry:'./src/main.ts'：指定项目的入口文件为./src/main.ts，Webpack 会从这个文件开始查找项目的所有依赖，并进行打包构建.
开发模式配置
mode:'development'：设置 Webpack 的运行模式为开发模式，在这种模式下，Webpack 会生成未压缩、可读性较强的代码，方便开发过程中的调试和错误排查，同时会提供一些开发时的便利功能，如热模块替换等.
模块解析配置
-
resolve:：用于配置模块的解析规则。alias:：创建别名，这里将@符号别名为path.resolve(__dirname,"src")，即项目的src目录。这样在项目中导入模块时，可以使用@符号作为根路径，提高模块导入的简洁性和可读性，例如import Hello from '@/components/Hello';.
模块规则配置
-
module:{rules:[...]}：定义了一系列的模块加载规则，用于处理不同类型的文件。{test:/.vue$/, use:'vue-loader'}：当遇到以.vue结尾的文件时，使用vue-loader进行处理，将 Vue 单文件组件转换为 JavaScript 模块，以便 Webpack 进行打包.{test:/.css$/, use:['style-loader','css-loader']}：对于以.css结尾的文件，先使用css-loader解析@import和url()等语句，然后使用style-loader将解析后的 CSS 代码注入到 HTML 页面的<style>标签中，使样式生效.{test:/.less$/, use:['style-loader','css-loader','less-loader']}：处理以.less结尾的文件，先通过less-loader将 Less 代码编译为 CSS 代码，再经过css-loader和style-loader的处理，使 Less 样式应用到页面中.{test:/.ts$/, use:'ts-loader', options:{...}}：针对以.ts结尾的 TypeScript 文件，使用ts-loader进行编译。其中configFile指定了 TypeScript 的配置文件路径，appendTsSuffixTo则表示对于匹配到的.vue文件，也需要添加.ts后缀进行处理，以便正确地解析和编译 Vue 组件中的 TypeScript 代码。
输出配置
-
output:：配置打包后文件的输出信息。filename:"[fullhash].js"：指定输出的 JavaScript 文件的名称，这里使用[fullhash]占位符，Webpack 会根据文件内容生成一个唯一的哈希值作为文件名的一部分，用于缓存 busting，确保每次修改文件后浏览器能够正确地加载最新的文件.path:path.resolve(__dirname,"dist")：通过path.resolve()方法指定输出文件的目录为项目根目录下的dist文件夹，即将打包后的文件都输出到dist目录中.clean:true：在每次构建之前，自动清理dist目录下的旧文件，确保输出目录中只包含最新的打包文件，避免旧文件的残留导致问题.
插件配置
-
plugins:[...]：配置 Webpack 使用的插件。new HtmlWebpackPlugin({template:'./public/index.html'})：创建一个HtmlWebpackPlugin的实例，指定./public/index.html为模板文件，Webpack 会根据这个模板文件生成最终的 HTML 文件，并自动引入打包后的 JavaScript 和 CSS 等资源.new VueLoaderPlugin()：实例化VueLoaderPlugin，用于确保vue-loader能够正常工作，正确地解析和处理 Vue 组件.
