Webpack

本文件已定稿，最后修改时间 20240722 10:30

---

一、webpack

模块化打包工具

二、安装webpack

1. 全局安装

   cnpm install webpack -g

   cnpm install webpack-cli -g

2. 测试版本

   webpack -v

   webpack-cli -v

三、配置

1. 入口

   默认：src/index.js

2. 出口

   默认：dist/main.js

3. entry

   1. 多文件打包成一个文件

      enrty:['./src/a.js','./src/b.js]

   2. 多文件打包成多文件

      entry:{
      	a:'./src/a.js',
      	b:'./src/b.js'
      }

四、loader

1. loader是什么

   webpack只能理解Javascript和JSON文件，这是webpack开箱可用的自带能力。loader让webpack能够去处理其他类型的文件，并将他们转换为有效模块，以供应用程序使用，以及被添加到依赖图中

2. loader的配置

   写法：

   module:{
       rules:[{test:/\.txt$/,use:'raw-loader'}],
   }

   1、test属性，识别出哪些文件会被转换

   2、use属性，定义出在进行转换时，应该使用哪个loader

五、插件

html-webpack-plugin

1. 下载

   cnpm install html-webpack-plugin -S

2. 引入

   var HtmlWebpackPlugin = require('html-webpack-plugin');

3. 配置

   plugins: [
   	        new HtmlWebpackPlugin()
   	    ]

4. 参数说明

   1. 指定模版页面

      template:'./src/index.html'

   2. 修改默认输出文件名

      filename:'xx.html'

   3. 允许插入到模板中的一些chunk

      chunks:['jquery','xx']

   4. 配置不允许注入的thunk

      excludeChunks:['xx']

5. 多页面打包

   需要创建多个new HtmlWebpackPlugin

六、图片加载

1. 加载图片的loader ==> file-loader

   {
   	test: /\.(png|jpg|jpeg|gif)$/, 
   	use: [{
   	loader:'file-loader',
   	options:{
   		esModule:false,
   		outputPath:'img/'
   	    }
   	}]
   }

2. 让html支持图片的loader ==> html-withimg-loader

   {
       test: /\.html$/, 
       use: 'html-withimg-loader'
   }

七、添加字体图标

{
   test: /\.(eot|svg|ttf|woff|woff2)$/, 
   use: 'file-loader?name=./fonts/[name].[ext]'
}

八、压缩打包CSS

1. 单独抽离css文件

   1. 下载插件： mini-css-extract-plugin

   2. 引入插件：

      var MiniCssExtractPlugin = require('mini-css-extract-plugin');

   3. 修改loader：

      { 
      	test: /\.css$/, 
      	use: [MiniCssExtractPlugin.loader,'css-loader']
      }

   4. 使用插件

      plugins:[
      	new MiniCssExtractPlugin()
      ]

2. 压缩css文件

   插件： optimize-css-assets-webpack-plugin