详细 webpack( 三 ) _vue

然后在终端安装一下
npm install --save-dev css-loader style-loader
const path = require("path");//path 模块是内置的核心模块之一，path模块的主要作用是帮助你处理路径相关的操作，比如拼接路径、解析路径、获取路径的绝对路径等。module.export={entry: path.join(__dirname, 'src', 'index.js'), //打包单个文件，__dirname绝对路径，在那个文件夹，要打包文件output: {//定义打包后的文件输出路径、文件名以及其他输出相关的选项，他是一个绝对路径。path: path.join(__dirname, "dist"),//path指定输出文件的存放路径，path.join函数来拼接目录路径；名称为dist打包后存放的文件夹//代表当前模块文件所在的目录的绝对路径，是一个全局变量，返回的是一个字符串//文件名filename: "index.js"// '[name].[ext]' 占位符允许动态生成文件名,//指定输出的文件名}，module: {rules: [{test: /\.css$/i,use: ["style-loader", "css-loader"],},],},//mode模式分开发模式生产模式mode: "development"}
使用npm run build 进行打包文件
插件
常用的插件有：
''用于生成HTML文件、
// 'HtmlwebpackPlugin'生成html文件//1、首先在终端安装：//在终端输入npm install html-webpack-plugin --save-dev //作为开发依赖//用于将生成的html文件并自动将打包好的脚本文件添加到html中。//2、在webpack.config.js中添加一下这段代码//跟入口出口都是同级const HtmlWebpackPlugin = require('html-webpack-plugin');//使用require导入'HtmlWebpackPlugin'；'html-webpack-plugin'生成html文件的过程，在打包过程中会自动生成一个包含正确资源链接的html文件，方便浏览器加载和使用module.exports = {//是将配置对象导出module是配置的属性，是一个包含各个模块规则的对象plugins:[ //配置了一个plugins属性他的值是数组new HtmlWebpackPlugin({template:'./src/index.html',//指定模板HTML的文件路径filename:'index.html' ,//生成打包好的文件下的（dist）的HTML文件的文件名称名 }) ]}
''用于提取CSS文件、有助于优化页面加载速度、提供缓存优化，并提高可维护性。
//MiniCssExtractPlugin 用于单独提取css//首先在终端//在终端输入npm install mini-css-extract-plugin --save-dev //作为开发依赖//2、在webpack.config.js中添加一下这段代码const MiniCssExtractPlugin = require('mini-css-extract-plugin');//将css打包后的js文件中抽取出来，生成独立的css文件。通过抽取css到独立的文件可以实现样式的分离和优化。通过配置入口文件、输出文件、模块解析规则等。module.exports = {// ...其他配置module: {rules: [{test: /\.css$/,//用来匹配css文件use: [MiniCssExtractPlugin.loader, 'css-loader'],//解析css文件并处理依赖关系// 当匹配到css 结尾的文件时，把css提取到单独文件中，而不是以内联样式的方式存在。内联的意思就是直接嵌入到html元素的style属性中的方式，而不是放在外部的css文件中。//将css从打包的jacascript文件中抽离出来，生成一个单独的css文件。},],},plugins: [//配置了一个plugins属性new MiniCssExtractPlugin({//创建A了一个MiniCssExtractPlugin实例，并传入一个配置对象作为参数filename: 'styles.css', // 生成的CSS文件名//filename指定生成了css文件名，就是将打包好的css提取到单独的css文件中，而不是以内联样式的方式存在。生成css文件会根据指定的文件名保存在输出目录中}),],};
'‘用于清理输出目录等。：输出目录中会生成新的构建文件，而旧的构建文件可能仍然存在于目录中。