webpack的学习与理解

November 08, 2023 3257

一、查看项目webpack配置详情

项目终端直接输入：vue inspect > output.js

二、webpack是什么？

​ webpack是一个现代javascript应用程序的静态模块打包器（因为浏览器只能解析js文件，因此需要对文件进行编译打包）

三、 webpack能做什么？

​ 1.语法转换。less/sass/stylus转换为css,ES6转ES5

​ 2.html、css、js代码压缩合并（打包）

​ 3.webpack可以在开发期间提供一个开发环境，自动打开浏览器，保存时自动刷新浏览器，

​ 4.项目一般打包再上线，因此webpack配置开发环境用，线上不用，依赖文件也是下载为-D

四、 webpack.config.js 和vue.config.js有什么区别？

webpack.config.js: 是webpack的配置文件，所有使用webpack作为打包工具的项目都可以使用，vue的项目可以使用，react的项目也可以使用。

vue.config.js: 是vue项目的配置文件，专用于vue项目。通过vue.config.js中常用功能的配置，简化了配置工作，当然如果需要更专业的配置工作，webpack.config.js和vue.config.js在vue项目中是可以并存的。

五、vue.config.js具体配置

  1. 具体代码

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    48
    49
    50
    51
    52
    53
    54
    55
    56
    57
    58
    59
    60
    61
    62
    63
    64
    65
    66
    67
    68
    69
    70
    71
    72
    73
    74
    75
    76
    77
    78
    79
    80
    81
    82
    83
    84
    85
    86
    87
    88
    89
    90
    91
    92
    93
    94
    95
    96
    97
    98
    99
    100
    101
    102
    103
    104
    105
    106
    107
    108
    109
    110
    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模块加载规则
     //默认，webpack只认识json,js，
     module:{
     	rules:[
     		//（1）配置css文件的解析
     		{
     			//匹配所有以css结尾的文件，正则
     			test:/\.css$/,
     			//css-loader让webpack能够识别css文件
     			//style-loader通过动态创建style标签的方式让解析后的css内容，能够作用到页面中
     			use:[{
     				loader:MiniCssExtractPlugin.loader,
     				options:{
     					//公共资源加载的路径
     					publicPath:'../',
     					//https://www.bilibili.com/video/BV1vJ411E7rn?p=6
     				}
     			},'css-loader'],
     		},
     		//（2）配置less文件的解析
     		{
     			test:/\.less$/,
     			//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/"
     
     }
     }
     ]
     },
     //（4）配置高版本js兼容性处理
     {
     test:/\.js$/,
     //exclude为配置排除项
     exclude:/(node_modules)/,
     use:{
     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,
    }
     
    }