什么是webpack

简单来说就是一个打包工具，

可以将互相依赖的html、css、js以及图片字体等资源文件，经过处理打包成一个可执行的项目文件

环境初始化

在需要使用webpack的文件夹下，

首先执行npm init -y初始化，其中-y表示所有选项使用默认值

再执行npm add webpack webpack-cli --dev将webpack安装到开发者环境中

这样我们就能获得初始的开发环境

配置webpack

这里才是学习webpack的重头戏，毕竟在webpack配置完成后，每次只要执行npx webpack便能智能地完成打包

初步配置

在根目录下新建一个’webpack.config.js’文件

1
2
3
4
5
6
7
8
9
const path = require("path");
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        filename: "dist.js",
        path: path.resolve(__dirname,"dist"),
    }
}

其中

  • mode，选择了开发者模式
  • entry，选择了相对于config文件的src目录下的index.js作为入口文件
  • output, 对于输出配置了输出的名字，并且使用了自带的path配置了输出目录

执行npx webpack，可以看到不仅重新输出了dist.js，其中的内容也和之前的有了不一样

打包CSS文件和图片

要先安装 npm add --dev style-loader css-loader
然后要在webpack.config.js里对需要引入的文件名进行配置，如配置如下

1
2
3
4
5
6
7
8
9
10
11
12
module: {
    rules: [
      {
        test: /\.css$/i,
        use: ["style-loader", "css-loader"],
      },
      {
        test: /\.(png|svg|jpg|jpeg|gif)$/i,
        type: "asset/resource",
      },
    ],
  },

使用webpack插件自动生成html文件

还是安装
npm add html-webpack-plugin --dev
然后导入webpack.config.js文件
const HtmlWebpackPlugin = require("html-webpack-plugin")
再进行配置即可

1
2
3
4
5
plugins:[
  new HtmlWebpackPlugin({
      title: "博客列表",
  })
],

所以这时候再执行打包命令，可以看到输出文件夹下还多了一个index.html

这个HTML的标题默认为Webpack App

我们也可以对这个进行配置

兼容低版本浏览器

要让新的JavaScript的特性兼容低版本的浏览器，需要用到babel，而webpack也支持相应的loader

所以首先还是安装
npm add --dev babel-loader @babel/core @babel/preset-env
这三个包提供了我们需要的功能
然后再进行下面的配置

1
2
3
4
5
6
7
8
9
10
{
  test: /\.js$/,
  exclude: /node_modules/,
  use: {
    loader: "babel-loader",
    options: {
      presets: ["@babel/preset-env"],
    },
  },
},

压缩打包后的js代码

同样是两步，先安装
npm add --dev terser-webpack-plugin
然后引入和配置
const TerserPlugin = require("terser-webpack-plugin")

1
2
3
4
optimization: {
  minimize: true,
  minimizer: [new TerserPlugin()],
},

无需执行命令自动打包

现在每次修改了代码后都得重新执行打包命令
webpack也提供了一个插件能在保存后自动打包

还是先安装
npm add --dev webpack-dev-server
然后先在webpack.config.js中进行配置

1
2
3
devServer: {
  static: "./dist",
},

再在package.json中进行配置

1
2
3
"scripts": {
    "start": "webpack serve --open"
  },

这样在我们执行npm start的时候就会自动执行webpack serve
并且通过 npm start 打开的网页能在我们修改保存后自动刷新页面

避免浏览器缓存js文件

由于现在每次生成的文件名都是dist.js，所以浏览器会对这个文件进行缓存，进而不更新
为了避免进行缓存，可以给文件名添加一段随机的字符，每次更新后都生成新的随机字符
所以在webpack.config.js中配置输出即可

1
2
3
4
output: {
    filename: "[name].[contenthash].js",
    path: path.resolve(__dirname, "dist"),
  },

配置可视化打包工具

这是一个帮助分析的工具，它会可视化地展现打包过程中哪个文件占的体积比较大
所以同样的，先是安装这个插件
npm add --dev webpack-bundle-analyzer
接着在配置中引入这个插件
const BundleAnalyzerPlugin = require("webpack-bundle-analyzer");
以及在plugins中添加它

1
2
3
4
5
6
plugins: [
  new HtmlWebpackPlugin({
    title: "test",
  }),
  new BundleAnalyzerPlugin.BundleAnalyzerPlugin()
],