webpack的理解，vue.config.js文件各个部分的含义

webpack是一个现代javascript应用程序的静态模块打包器

• 语法转换。less/sass/stylus转换为css，ES5转换为ES%，……；
• html.css.js代码压缩合并（打包）；
• webpack可以在开发期间提供一个开发环境。自动打开浏览器，保存时自动刷新；
• 项目一般先打包在上线。开发用，上线不用，npm install 包名字 -D

 

vue.config.js

const path = require('path')

//引入自动生成的html插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

//引入分离css文件的模块
const MiniCssExtractPlugin = require('mini-css-extract-plugin');

//导入清除插件，可以在每次打包之前清除dist目录的内容
const { CleanWebpackPlugin } = require('clean-webpack-plugin');

// webpack-dev-server 相关配置,需要将配置的对象到处，给webpack使用
module.exports = {
　　//入口entry，从哪个文件开始打包
　　entry: './src/main.js',
　　//出口output，打包到哪里去
　　output:{
　　　　//打包输出的目录（输出的目录必须是一个绝对路径）
　　　　path:path.join(__dirname,'dist'),
　　　　//打包后生成的文件名
　　　　filename:'js/bundle.js'
　　},
　　//模式mode development未压缩的，production压缩
　　mode:'development',

　　//配置module模块加载规则
 27　　 //默认，webpack只认识json,js，
　　module:{
　　　　rules:[
 30　　　　 //（1）配置css文件的解析
 31　　　　 {
　　　　　　//匹配所有以css结尾的文件，正则
 33　　　　　　 test:/\.css$/,
　　　　　　//css-loader让webpack能够识别css文件
　　　　　　//style-loader通过动态创建style标签的方式让解析后的css内容，能够作用到页面中
　　　　　　use:[{
　　　　　　　　loader:MiniCssExtractPlugin.loader,
　　　　　　　　options:{
　　　　　　　　　　//公共资源加载的路径
 40　　　　　　　　　　 publicPath:'../',
　　　　　　　　　　//https://www.bilibili.com/video/BV1vJ411E7rn?p=6
 42　　　　　　　　 }
 43　　　　　　 },'css-loader'],

　　
　　　　},
　　　　//（2）配置less文件的解析
　　　　{
　　　　　　test:/\.less$/,
 50　　　　　　 //use中从后往前作用,less转换为css,css转换为webpack可识别
　　　　　　// use:['style-loader','css-loader','less-loader']
　　　　　　use:[{
　　　　　　　　loader:MiniCssExtractPlugin.loader,
　　　　　　　　options:{
　　　　　　　　　　//公共资源加载的路径
　　　　　　　　　　publicPath:'../',

　　　　　　　　}
　　　　　　},'css-loader','less-loader']
　　　　},
　　　　//（3）配置图片文件的解析
　　　　{
　　　　　　test:/\.(png|jpg|gif)$/i,
　　　　　　use:[
　　　　　　　　//url-loader如果不配置，默认都会将文件转换为base64字符串的格式
　　　　　　{
　　　　　　　　loader:'url-loader',
　　　　　　　　//8K以内转换为base64，8k以外，单独的一个文件请求
　　　　　　　　options:{
　　　　　　　　　　limit:8*1024,
　　　　　　　　　　//配置输出的文件名
　　　　　　　　　　name: '[name].[ext]',
　　　　　　　　　　//配置静态资源的引用路径
　　　　　　　　　　publicPath:'../images/',
　　　　　　　　　　//配置输出的文件目录
　　　　　　　　　　outputPath:"images/"

　　　　　　　　}
　　　　　　}
 80　　　　　　 ]
　　　　},
　　　　//（4）配置高版本js兼容性处理
　　　　{
　　　　　　test:/\.js$/,
　　　　　　//exclude为配置排除项
　　　　　　exclude:/(node_modules)/,
 87　　　　　　 use:{
 88　　　　 　　　　loader:'babel-loader',
　　　　　　　　options:{
　　　　　　　　　　presets:['@babel/preset-env']
　　　　　　　　}
　　　　　}
　　}]
},

//配置插件
plugin:[
　　//自动生成html的插件
　　new HtmlWebpackPlugin({template: './src/view/index.html'}),
　　//分离css的插件，定义打包好的文件的存放路径和文件名
　　new MiniCssExtractPlugin({
　　　　filename:'css/index.css'
　　}),
　　//清除dist目录的插件
　　new CleanWebpackPlugin()
],
//配置开发服务器
devServer: {
　　port:3000,
　　open:true,
}

}