moonshot 9 - Webpack

Citizen7
121 阅读5分钟

基础

  • 什么是Webpack Webpack是前端项目工程化的具体解决方案。

它提供了友好的前端模块化开发支持，以及代码压缩混淆、处理浏览器端JavaScript的兼容性、性能优化等强大的功能。

压缩：删除原代码中的空行和空格
混淆：把原代码中的变量替换成没有语义化的字母

  • Webpack基本使用

  1. 安装 在项目中打开终端，在终端使用npm安装
    npm i webpack@5.5.1 webpack-cli@4.2.0 -D
    注意webpack是开发时依赖。

  2. 创建配置文件 在项目根目录中，创建名为webpack.config.js的配置文件，并初始化如下

module.exports = {
    mode: 'development'
}

mode表示环境模式，可以是开发环境development，也可以是生产环境production。在我们开发过程中使用development，因为它不会对打包生成的文件进行代码压缩和性能优化，所以打包速度快，且易于我们检查与修改。等到项目真正上线时才用production打包，此时代码会被压缩并且会进行性能优化。

  1. 新增dev脚本 在package.json文件的scripts节点下，新增dev脚本如下
"scripts": {
    "dev": "webpack"
}

scripts节点下的脚本，可以通过npm run xxx在执行。

  1. 自定义打包的入口与出口 默认情况下webpack会把./src/index.js作为打包入口，把./dist/main.js作为打包出口。当然，我们可以在配置文件中自定义入口与出口
const path = require('path')

module.exports = {
    mode: 'development',
    entry: path.join(__dirname, './src/index.js'), // 定义打包入口文件的路径
    output: {
        path: path.join(__dirname, './dist'), // 出口文件的存放路径
        filename: 'bundle.js' // 出口文件的文件名
    }
}

插件

  • 插件的作用 通过安装和配置第三方插件，可以拓展webpack的能力，从而让webpack用起来更方便。

  • 常用插件

  1. webpack-dev-server 类似于node.js阶段用到的nodemon工具，每当我们修改了源代码，webpack就会自动对项目进行打包和构建。

  2. html-webpack-plugin 它是webpack中的HTML插件，可以通过这个插件自定义index.html页面的内容。

  • webpack-dev-server插件的使用

  1. 安装 webpack中的插件也需要用npm下载
    npm i webpack-dev-server@3.11.0 -D

  2. 修改dev脚本 将package.json文件的scripts节点下的dev脚本修改如下

"scripts": {
    "dev": "webpack server"
}

  1. 运行并查看 再次运行npm run dev命令，重新对项目进行打包。并在浏览器中访问http://localhost:8080地址查看自动打包的效果。

  2. 更多设置 在webpack.config.js配置文件中，可以通过devServer节点对webpack-dev-server插件进行更多的配置

devServer: {
    open: true, // 初次打包完成后，是否自动打开浏览器
    host: '127.0.0.1', // 实时打包所使用的主机地址
    port: 80 // 实时打包所使用的端口号
}
  • html-webpack-plugin插件的使用
  1. 安装

npm i html-webpack-plugin@4.5.0 -D

  1. 配置
// 1. 导入插件，得到构造函数
const HtmlPlugin = require('html-webpack-plugin')

// 2. 创建插件的实例对象
const htmlPlugin = new HtmlPlugin({
    // 指定原文件的存放路径
    template: './src/index.html',
    // 指定生成的文件的存放路径
    filename: './index.html'
})

module.exports = {
    ...
    // 3. 挂载插件的实例对象
    plugins: [htmlPlugin]
}

loader加载器

在实际开发过程中，webpack默认只能打包处理以.js后缀名结尾的模块。其他非.js后缀名结尾的模块，webpack默认处理不了，需要调用loader加载器才可以正常打包，否则会报错。

  • loader的作用 协助webpack打包处理特定的文件模块，比如
  1. css-loader——可以打包处理.css文件
  2. less-loader——可以打包处理.less文件
  3. babel-loader——可以打包处理webpack无法处理的高级js语法

  • loader的调用过程 image.png

  • 处理css文件的loader的使用

  1. 安装 运行npm i style-loader@2.0.0 css-loader@5.0.1 -D安装处理.css文件的loader。

  2. 配置 在webpack.config.js配置文件中新增module->rules节点，并添加loader

module: { // 所有第三方文件模块的匹配规则
    rules: [ // 文件后缀名的匹配规则
        { 
            test: /\.css$/, // 要匹配的文件类型
            use:['style-loader', 'css-loader'] // 要使用的loader
        }
    ]
}

注意，use数组中指定的loader顺序是固定的，在webpack调用的时候是从后往前调用use中的loader。

  • 打包处理样式表中与url路径相关的文件

  1. 安装 运行npm i url-loader@4.1.1 file-loader@6.2.0 -D命令。

  2. 配置

module: { // 所有第三方文件模块的匹配规则
    rules: [ // 文件后缀名的匹配规则
        { 
            test: /\.jpg|png|gif$/, // 要匹配的文件类型
            use: 'url-loader' // 只有一个loader可以省略数组
        }
    ]
}
  1. limit参数 在实际开发中，如果我们要插入的图片很多，就需要频繁地加载这些图片，所以我们可以把那些比较小的图片转成base64格式的图片，加快加载速度。那么url-loader下的limit就是用来划分这些图片是不是较小的图片的参数。
module: { // 所有第三方文件模块的匹配规则
    rules: [ // 文件后缀名的匹配规则
        { 
            test: /\.jpg|png|gif$/, // 要匹配的文件类型
            use: 'url-loader?limit=22229' // 只有一个loader可以省略数组
        }
    ]
}

可以直接把limit参数用查询字符串的形式拼接在后面，它的单位是字节，只有图片大小小于等于我们给定的数值时才会把图片转成base64格式。

  1. 另一种写法
module: {
    rules: [
        { 
            test: /\.jpg|png|gif$/, // 要匹配的文件类型
            use: {
                loader: 'url-loader', // 要使用的loader
                options: { // loader的参数项
                    limit: 22229
                }
            }
        }
    ]
}
  • babel-loader的使用 webpack本身只能打包处理一部分的JS高级语法，还有一部分需要借助babel-loader来打包处理。

  1. 安装 运行npm i babel-loader@8.2.1 @babel/core@7.12.3 @babel/plugin-proposal-class-properties@7.12.1 -D命令安装所需要的依赖包。

  2. 配置 exclude节点用于匹配文件目录，可以排除node_modules目录中的.js文件，让webpack只打包处理我们自己写的.js文件就行了，提高了打包速度

module: {
    rules: [
        { 
            test: /\.js$/,
            exclude: /node_modules/, // 排除项
            use: {
                loader: 'babel-loader',
                options: {
                    // 声明一个babel插件，用于转化class中的高级语法
                    plugins: ['babel/plugin-proposal-class-properties']
                }
            }
        }
    ]
}

打包发布

  • 配置打包发布 在package.json文件的scripts节点下，新增build命令如下
"scripts": {
  "dev": "webpack server", // 开发环境时打包
  "build": "webpack --mode production" // 项目发布时的打包
}
  • 自动清理插件 我们每次打包之后会在dist目录下生成新的打包后的文件，但如果上一次打包留下的文件没有清理，那么它们都会存在于dist目录下，因此我们需要下载一个插件，帮助我们在每次打包的时候自动清理dist目录下的旧文件。
// 安装插件
npm i clean-webpack-plugin@3.0.0 -D

// 导入插件里的构造函数并创建实例对象
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const cleanPlugin = new CleanWebpackPlugin()

// 把创建好的插件实例对象，挂载到plugins节点中
module.exports = {
    ...
    plugins: [htmlPlugin, cleanPlugin]
}
avatar
文章
阅读
粉丝