WebPack 打包工具的使用

01 - webpack简介

1. 是一款静态 javascript 应用程序的打包工具。
2. 翻译压缩代码; 降级(支持低级语法)
3. 减小代码包体积, 让浏览器更快速打开网页
4. 前提安装 node 并在项目初始化 npm init -y, 生成文件 package.json

02 - 安装使用 webpack

1. webpack是一个工具，对于所有的项目都可以来使用，从这个意义上来讲，它是可以去全局安装的，但是，考虑到不同的项目中可能使用了不同的webpack版本。所以在这里我们选择: npm i webpack webpack-cli -D
2. 验证是否安装成功: npx webpack -v; 如果成功会显示版本号。

03 - 配置一些基础项 1)

const path = require('path')
module.exports = {
    // mode: 'development', // 打包方式
    mode: 'production', // 打包方式
    entry: './src/js/main.js', // 入口
    output: { // 出口
        "path": path.join(__dirname, "webxlt"), // 绝对路径
        "fileName": "webxlt.js"
    }
} 
1
2
3
4
5
6
7
8
9
10

2. development :开发模式(代码不会压缩 混淆); production:生产模式（压缩，混淆，加密… 不可读）

03 - 打包的配置文件

1. 例如: 命名一个为: webpack.dev.js 的文件在里面书写 webpack 打包的配置文件; 当然文件名是自己定义的
2. 运行命令: npx webpack 入口文件 --config (webpack的配置文件名); 如果是为上述文件名那么示例如下: npx webpack (路径文件名) --config webpack.dev.js ./index.js

03 - 简化打包命令

1. 在 package.json 文件里

"scripts": {
  "dev": "webpack  --config webpack.dev.js",
  "build": "webpack index.js",
  "test": "echo "Error: no test specified" && exit 1"
} 
1
2
3
4
5

在文件下的命令行 npm run dev 就可执行上述命令

03 - loader 介绍及使用

1. 因为 webpack 只能打包 javascript 的模块, 对于 css img 等文件是不具备打包功能的, 那么顺应条件 loader 的一系列包就产生了其中有:
2. 安装: 打包普通 css 的 loader: npm i css-loader style-loader -D 这两个包; less 则需要在下载一个: npm i less-loader -D; less-loader:用来加载less文件，并处理成css; css-loader：用来加载css文件; style-loader:用来将css代码以style标签的格式插入到html文件中; 修改图片的包: asset-module 一般来说现在的 webpack 已经支持 图片的打包之前的版本是不支持的;
3. 使用: 修改 webpack.config.js 文件，添加 module: 如下

 module: {
        rules:[ // 规则
        {
          // 当遇到以 css 结尾的文件的时候就去找 css-loader 这个包
          test: /\.css$/, 		// 正则测试
          // 如果有多个 loader, 执行顺序是从右到左
          // 先执行 css-loader ----> 在 style-loader
          // css-loader 让 webpack 识别 css 
          // style-loader: 把 css 写在 style 标签中, html 才会有样式效果
          use: ['style-loader','css-loader'] 	// loader
        },
        {
            // 当遇到以 css 结尾的文件的时候就去找 css-loader 这个包
            test: /\.less$/, 		// 正则测试
            use: ['style-loader','css-loader','less-loader'] 	// loader
        },
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
        }
      ]

    } 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23

它是与打包方式、入口、出口的配置是同级的

03 - plugin 插件的介绍及使用

1. plugin, 中文就是插件。它可以用来增强webpack的功能官网: www.npmjs.com/package/htm…
2. 安装命令: npm i html-webpack-plugin -D
3. 使用:

const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
    plugins: [
        new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({ // 打包输出HTML
            minify: { // 压缩HTML文件
              removeComments: true, // 移除HTML中的注释
              collapseWhitespace: true, // 删除空白符与换行符
              minifyCSS: true// 压缩内联css
            },
            filename: 'index.html', // 打包后生成的 html 文件名
            template: path.resolve('./index.html') // 指定模块的位置
          })
    ] 
1
2
3
4
5
6
7
8
9
10
11
12
13
14

03 - webpack-dev-server webpack 实时打包工具

1. 介绍: 实现实时打包预览效果。当我们修改了代码时，立即运行打包命令，并显示效果。注意: 浏览器看到的实时效果是服务器通过“内存”提供的，没有物理文件，也不会生成dist目录
2. 使用:

 devServer: {
        host: '127.0.0.1',  // 配置启动ip地址
        port: 10088,  // 配置端口
        open: true  // 配置是否自动打开浏览器
    } 
1
2
3
4
5

在 package.json 加入一个配置项:

"scripts": {
   "dev": "webpack-dev-server",
  }, 
1
2
3