Webpack | 青训营笔记

这是我参与「第五届青训营 」伴学笔记创作活动的第 13 天

核心流程

常用流程类配置

基本使用

简单使用

0. 安装依赖

    npm i -D webpack webpack-cli
   

1. 编写 webpack.config.js 配置文件

   const path = require("path");
   ​
   module.exports = {
     // 入口文件
     entry: "./src/index",
     mode: "development",
     devtool: false,
     // 输出文件
     output: {
       filename: "[name].js",
       path: path.join(__dirname, "/dist"),
     },
   };
   ​
   

2. 执行 npx webpack 命令，打包文件

处理CSS

0. 安装loader

   npm add -D css-loader style-loader
   

1. 添加 module 处理css文件

   ​
   module.exports = {
     //...
     module: {
       rules: [
      {
        // 过滤条件，满足才会处理(此处也可以处理less，sass等文件)
        test: /.css$/,
        // 使用以下两个loader一起处理.css后缀的文件
        use: ["style-loader", "css-loader"],
      },
    ],
    },
   };
   ​
   

2. 执行 npx webpack

接入Babel

代码转译的工具，解决浏览器不支持es6的问题，转译之后使浏览器兼容

0. 安装依赖

   npm i -D @babel/core @babel/preset-env babel-loader
   

1. 声明产物出口 output

   module.exports = {
    //...
    module: {
    rules: [
      {
        // 使用babel-loader处理js文件
        test: /.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [["@babel/preset-env"]],
            },
          },
        ],
      },
    ],
    },
   };
   ​
   

2. 执行 npx webpack

自动生成HTML

0. 安装依赖

   npm i -D html-webpoack-plugin
   

1. 声明产物出口 output

   const path = require("path");
   const HtmlWebpackPlugin = require("html-webpack-plugin");
   ​
   module.exports = {
     //...
     // 自动生成html文件
     plugins: [new HtmlWebpackPlugin()],
   };
   

2. 执行 npx webpack

HMR-模块热替换

hot module replacement

0. 安装依赖

   npm install -D webpack-dev-server
   

1. 修改配置项

   module.exports = {
    //...
    devServer:{
   	hot:true
    }
   }
   

2. 执行 npx webpack serve

Tree-Shaking

删除一些 没有用到 或者 模块导出了，但是未被其他模块使用 的代码

开启 tree-shaking（对工具类库如 Loadsh 有奇效）

module.exports = {
  //...
  mode: "production",
  optimization: {
    usedExport: true,
  },
}

完整代码

const path = require("path");
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 入口文件
  entry: "./src/index",
  // 如果不写，默认是production
  mode: "production",
  // 开启tree-shaking,需要把mode设置为production
  optimization: {
    usedExport: true,
  },
  devtool: false,
  // 模块热替换
  devServer: {
    hot: true,
  },
  // 持续监听文件变化，持续构建
  watch: true,
  // 输出文件
  output: {
    filename: "[name].js",
    path: path.join(__dirname, "/dist"),
  },
  module: {
    rules: [
      {
        // 过滤条件，满足才会处理(此处也可以处理less，sass等文件)
        test: /.css$/,
        // 使用以下两个loader一起处理.css后缀的文件
        use: ["style-loader", "css-loader"],
      },
      {
        // 使用babel-loader处理js文件
        test: /.js$/,
        use: [
          {
            loader: "babel-loader",
            options: {
              presets: [["@babel/preset-env"]],
            },
          },
        ],
      },
    ],
  },
  // 自动生成html文件
  plugins: [new HtmlWebpackPlugin()],
};

Loader

Loader——为了处理非标准JS资源，设计出资源翻译模块。用于将资源翻译为标准JS

基本使用

0. 安装Loader

   npm add -D css-loader style-loader less-loader
   

1. 添加 module 处理css文件

   module.exports = {
       module:{
           rules:[
               {
                   test:/.less$/i,
                   use:[
                       "style-loader",
                       "css-loader",
                       "less-loader",
                   ]
               }
           ]
       }
   }
   

• less-loader :实现 less => css 的转换
• css-loader :将 CSS 包装成类似 module.exports = "${css}" 的内容，包装后的内容符合 JavaScript 语法
• style-loader :将 css 模块包进 require 语句，并在运行时调用 injectStyle 等函数将内容注入到页面的 style 标签

链式调用

执行顺序：less-loader -->css-loader --> style-loader

如何编写Loader

/* 基本结构如下 */

module.exports = function(source, sourceMap?, data?){
	// source 为 loader 的输入
    // 可能是文件内容，也可能是上一个 loader 处理结果
    return source;
}

常用的Loader

Plugin

基本使用

0. 安装依赖

1. 引入插件

   const HtmlWebpackPlugin = require("html-webpack-plugin");
   
   module.exports = {
     //...
     plugins: [
         // 自动生成html文件
         new HtmlWebpackPlugin(),
         // DefinePlugin
         new webpack.DefinePlugin({
             PRODUCTION: JSON.stringify(true),
             VERSION: JSON.stringify('5fa3b9')
         })
     ],
     
   };
   

理解插件（看不懂）