0基础讲解webpack

webpack：现代 javascript 应用程序的 静态模块打包器 (module bundler)，开发完项目， 可以用node+webpack来分析, 翻译, 压缩, 打包，减小代码包体积, 让浏览器更快速打开网页。

 使用webpack前的准备：

• Node环境软件
• npm或yarn模块管理器
• 项目文件夹和包环境
• 下载webpack并配置命令

webpack的使用：

• 先下载安装webpack, 配置打包命令
• 默认入口src/index.js-要被打包的文件, 要引入到这里使用
• 输入yarn build打包命令(实际是项目环境webpack命令)
• 输出代码到dist/main.js中

 在package.json中, 配置scripts(自定义命令)：

"scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  }

webpack-打包流程图： 

• 执行局部webpack命令(前提项目中下载了webpack包)
• 有webpack.config.js用, 否则用内置默认
• 根据入口建立引入关系
• 编译翻译整合打包输出到指定位置

 模块想要被webpack识别打包, 要注意：模块文件要和webpack入口产生直接或间接引入关系。

webpack-配置修改：

• 项目根目录 - 新建webpack.config.js文件 (默认配置文件名)

// 遵守CommonJS规范(Nodejs), 配置文件是要交给node环境使用的, node+webpack打包
const path = require('path');
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  mode: 'production', // mode设置"development"开发模式(代码可读性), 默认"production"生产模式(上线)-(极致压缩去掉所有注释和换行)
  entry: './src/main.js', // 入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 出口文件夹路径
    filename: 'bundle.js', // 出口文件名
  },
  devServer: {
    port: 3000, // 端口号
    open: true // 自动打开浏览器
  },
  plugins: [ // 插件
    new HtmlWebpackPlugin({
      template: './public/index.html' // 让webpack生成html文件, 要把指定的模板里的代码都携带着
    })
  ],
  module: { // 加载器loader
    rules: [ // 规则
      { // 具体规则对象
        test: /\.css$/i, // 匹配.css结尾的文件(忽略大小写)
        use: ["style-loader", "css-loader"],
        // css-loader 把import css当做js引入(把css代码打包进js中)
        // style-loader 把css代码插入到DOM中 (把js里的css代码, 解析插入到网页dom上)
      },
      {
        test: /\.less$/i,
        use: ["style-loader", "css-loader", "less-loader"]
        // 顺序不能乱: loader是从右往左使用的
        // less-loader: 把less文件转css文件和代码
        // css-loader: 把css代码打包进js中
        // style-loader: 把css代码 -> 插入 -> DOM中
      },
      {
        test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
        type: 'asset' // 在导出一个 data URI(base64字符串) 和一个单独的文件之间自动选择
        // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
        // 好处: 减少http请求次数

        // 大于8kb的, 直接复制文件到dist目录下
        // 为何不转base64: 因为转base64会体积增30%
      },
      {
        test: /\.(eot|svg|ttf|woff|woff2)$/, // 匹配以.eot/.svg/.ttf/.woff/.woff2结尾文件
        type: 'asset/resource',  // 当做静态资源直接"复制"文件
        generator: {
          filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
          // [name] 占位符-还使用源文件的名字
          // [hash:6] 随机产生6位的hash值-防止跟别的文件重名
          // [ext] 占位符-使用源文件的扩展名 (.ttf / .woff)
        }
      },
      {
        test: /\.js$/, // 匹配js结尾文件
        exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
        // 下载了jq3.x版本, 在node_modules(而且这个文件特别大, 你要转换起来, 很慢, 容易出错)
        use: { 
            loader: 'babel-loader', // 使用加载器-处理
            options: {
                presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
            }
        }
    }
    ],
  },
}

下载插件及加载器：

{
  "name": "day01_webpack",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "devDependencies": {
    "@babel/core": "7.13.15",
    "@babel/preset-env": "7.13.15",
    "babel-loader": "8.2.2",
    "css-loader": "5.2.1",
    "html-webpack-plugin": "5.3.1",
    "less": "4.1.1",
    "less-loader": "8.1.0",
    "style-loader": "2.0.0",
    "webpack": "5.31.2",
    "webpack-cli": "4.6.0",
    "webpack-dev-server": "3.11.2"
  },
  "scripts": {
    "build": "webpack",
    "serve": "webpack serve"
  },
  "dependencies": {
    "jquery": "^3.6.0"
  }
}