webpack基本使用

webpack是模块化打包工具，能帮助我们打包css,js,html,png等资源，打包到一个js文件下，并可以帮助我们把less文件编译成css，ES6转译成ES5等。

一、基本打包命令

条件： node环境，并全局安装webpack npm install webpack webpack-cli -g

• 开发环境指令：webpack ./src/index.js -o ./build/built.js --mode=development
  webpack以./src/index.js为入口文件开始打包，打包后输出到./build/built.js

• 生产环境指令：webpack ./src/index.js -o ./build/built.js --mode=production
  webpack以./src/index.js为入口文件开始打包，打包后输出到./build/built.js

打包后文件运行：

• 使用node ./build/built.js可直接运行
• 手动创建html页面，并引入<script src="./built.js"></script>运行

webpack只能处理js、json文件，不能处理css、img等资源
测试目录及入口文件如下：

二、webpack配置文件

我们可以将一些编译选项放在配置文件中，以便于统一管理：
创建 webpack.config.js 文件，代码如下所示：
webpack有5项核心概念的配置，entry，output，module，plugins，mode

/*
    webpack的配置文件
    当运行webpack时，会加载里面的配置
    所有构建工具都是基于nodejs的，用的模块化是commonjs
*/
// resolve用来拼接绝对路径的方法
const { resolve } = require('path');
module.exports={
    // 入口文件
    entry: "./src/index.js",
    // 出口
    output:{
        filename: "build.js",
        // __dirname 是nodejs的变量，代表当前文件的绝对路径目录
        path: resolve(__dirname,"build")
    },
    // loader配置
    module:{
        rules:[]]
    },
    // plugins配置
    plugins: [],
    // 开发模式配置
    mode: "development",
    // mode: "production",
}

在webpack文件目录下直接运行webpack，和一运行的效果是一样的

三、loader（打包css/less文件）

Webpack 本身只能处理 JavaScript 模块，如果要处理其他类型的文件，就需要使用 loader 进行转换。
所以如果我们需要在应用中添加 css 文件，就需要使用到 css-loader 和 style-loader，他们做两件不同的事情，css-loader 会遍历 CSS 文件，然后找到 url() 表达式然后处理他们，style-loader 会把原来的 CSS 代码插入页面中的一个 style 标签中。

这个就用到node包，需要package.json文件记录

1. 初始化生成pakage.json文件 npm init
2. 下载依赖
   • npm install webpack webpack-cli --save-dev
   • npm install style-loader css-loader --save-dev

修改webpack配置文件的loader配置

// loader配置
module:{
 rules:[
   {
    // 匹配哪些文件
    test: /\.css$/,
    //使用哪些loader
    use:[
     // 创建style标签，将js中的样式字符串插入到style标签中，并添加到head标签中生效
     "style-loader",
     // 将css文件转换成commonjs模块加载的js文件中，里面内容是样式字符串
     "css-loader"
    ]
  }
 ]
},

在webpack配置文件目录下直接运行webpack，

注意：node包在当前目录及上一层或者往上上层放都行，因为node找包是这个原则。

再打开index.html（引入build.js），就可以看到css生效了

打包图片资源

需要url-loader、file-loader、html-loader

module:{
 rules:[
 ......
  {
   test: /\.png|jpg|gif$/,
   // 下载url-loader file-loader；
   //处理的是css中url引入的图片
   loader: "url-loader",
   options:{
     // 图片大小小于100kb时会被base64处理，（通常对8-12kb以下的图片进行base64处理）
     //这样做的好处是减少请求次数，减轻服务器压力
     //缺点是，图片体积会增大（文件请求速度变慢）
     limit: 100 * 1024,
     // 问题：因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs
     // 解决：关闭url-loader的es6模块化，使用commonjs解析
     esModule: false,
     //给图片进行重命名
     //[hash:10]取图片的hash前10位
      //[ext]图片的原拓展名
      name: '[hash:10].[ext]'
   }
 },
 {
   // 处理html文件的img图片（负责引入img，从而能被url-loader进行处理）
   test: /\.html$/,
   loader: "html-loader",
   options: {
     esModule: false,
   },
 }
]}

在 webpack 5 之前，我们可以用 file-loader 或 url-loader 处理这些图片文件，但在 webpack 5 中，我们已经没有必要再去安装对应的 loader 了，因为我们可以使用 资源模块Asset Module 来处理这些文件。

{
    test: /\.(png|svg|jpg|jpeg|gif)$/i,
    type: 'asset/resource',
    generator:{
        filename: 'img/[name].[hash:10].[ext]'
    }
},

打包字体图标

可以在iconfont下载字体图标，然后放在src里，在index.js中引入iconfont.css文件，在index.html中加字体图标
目录结构如下

loader配置如下：

{
    // 处理其他资源
    exclude: /\.(html|js|css|less|png|jpg|gif)$/,
    loader: "file-loader",
    options: {
        name: 'icon/[hash:10].[ext]'
    },
},

webpack5写法

{
    // webpack5处理icon
    test: /\.(woff|woff2|eot|ttf|otf)$/i,
    type: 'asset/resource',
    generator:{
        filename: 'font/[name].[hash:10].[ext]'
    }
},

四、plugins（打包html资源）

下载html-webpack-plugin插件，配置plugins
这样就能自动生成文件了

const HtmlWebpackPlugin = require("html-webpack-plugin");
// plugins配置
plugins: [
  // html-webpack-plugin的配置
  //功能：默认会创建一个空的html文件(没有结构)，并自动引入打包的所有资源
  //new HtmlWebpackPlugin()
  new HtmlWebpackPlugin({
    // 会复制"./src/index.html"文件，并自动引入打包的所有资源
    template: "./src/index.html"
  })
],

会发现loader配置和plugins插件配置的区别

• loader: 1.下载 2.使用（配置loader）
• plugins: 1.下载 2.引入 3.使用（配置plugins）

五、自动打包

webpack-dev-server，:用来自动化（自动编译，自动打开浏览器，自动刷新），启动命令：npx webpack-dev-server

下载包webpack-dev-server，
添加配置：

devServer: {
  // 项目构建后的路径
  static: {
      directory: path.join(__dirname, 'build'),
  },
  watchFiles: ['./src/index.html'],
  // 启动gzip压缩
  compress: true,
  // 端口号
  port: 9000,
  hot: true,
  // 自动打开浏览器
  open: true,
},

六、分离css，兼容css，压缩css

分离css-MiniCssExtractPlugin

MiniCssExtractPlugin官方文档
步骤

1. 安装mini-css-extract-plugin控件

npm install --save-dev mini-css-extract-plugin

2. 引入

const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//在loader中修改配置
test: /\.css$/,
// style-loader会创建style标签，将样式放上去；css-loader是将css文件整合到js文件中
// use: [ "style-loader","css-loader"]
//MiniCssExtractPlugin.loader提取js中的css成单独文件（html会自动引入所有生产的所有资源）
use: [ MiniCssExtractPlugin.loader,"css-loader"]

//在pligins中添加配置
plugins: [
   ...
   new MiniCssExtractPlugin({
      filename: "css/build.css"
  }),
],

兼容css（postcss-loader）

npm install --save-dev postcss-loader postcss postcss-preset-env

//修改loader
{
    test: /\.css$/,
    // style-loader会创建style标签，将样式放上去；css-loader是将css文件整合到js文件中
    // use: [ "style-loader","css-loader"]
    //MiniCssExtractPlugin.loader提取js中的css成单独文件（html会自动引入所有生产的所有资源）
    use: [ MiniCssExtractPlugin.loader,"css-loader",{
        loader: 'postcss-loader',
        options: {
            postcssOptions: {
                plugins: [
                    require('postcss-preset-env')
                ],
            },
        },
    }]
},

压缩css（CssMinimizerWebpackPlugin）

官方文档CssMinimizerWebpackPlugin

步骤

1. 安装 css-minimizer-webpack-plugin

npm install css-minimizer-webpack-plugin --save-dev

2. 配置

const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");

//webpack.config.js配置文件中添加
optimization: {
    minimizer: [
        // 压缩css
        new CssMinimizerPlugin(),
    ],
    //在开发环境下启用 CSS 优化
    minimize: true,
},