前言

由于对webpack的了解是一个小白阶段，所以我通过观看视频，以及书籍，针对webpack的相关知识进行了学习，来总结记录一下，以便后来观看，于是开启了我的掘金之旅，请多多指教。

为什么需要构建，都做那些事情

由于前端发展迅速，编写的源代码不能直接运行，需要构建工具将源代码转换成可以执行的HTML,javascript,css代码。

• 代码转换：例如将typescript转换为javscript，scss转换为css。
• 文件优化：压缩代码，压缩合并图片。
• 代码分割：提取多个页面公共的代码，以及首屏不需要执行的代码，让其异步加载。
• 模块合并：项目采用模块化，将需要多个模块通过构建合并成一个文件。
• 自动刷新：监听本地文件变化，自动构建，刷新浏览器。
• 代码校验：校验代码提交代码库前，是否规范。
• 自动发布：更新代码后，自动构建出线上发布代码，并且传输发布系统。

常用的构建工具

NPM Script，Grunt，Gulp，fis3，webpack，Rollup等构建工具，此文章主要讲解webpack，其余的不详细讲解，可以用过 juejin.cn/post/690270… 学习，或者《深入浅出Webpack》学习。

为什么选择webpack（优点）

• 社区活跃度高
• 可以使用插件扩展，插件比较丰富
• 官网维护更新快
• 配置灵活

webpack安装与使用

1. 创建项目文件my-project,然后执行npm init -y（-y的：每一步选择都是yes），文件下将出现package.json文件。

2. 安装webpack依赖，执行npm install webpack webpack-cli -D，可以通过查看node_modules文件，是否安装成功。

3. 创建webpack.config.js文件，在package.json文件scripts中加入'build':'webpack',来通过npm run build来启动webpack，如果你的webpack.config.js文件名创建的不是这个名称，可以通过'build':'webpack --config 文件名'来配置。

下面开始编写webpack.config.js 文件。 4. webpack.config.js 中基本配置

• entry 入口文件，通常配置'src/index.js'
• output 出口文件,配置打包后放在那个文件夹下，和打包之后文件名。
• mode 分为production生产模式，development开发模式，none什么都不设置，默认情况下为production。
• module 模块，通过test匹配不同的文件，来使用不同的loader来进行解析，转换。

'use strict';
const path = require('path');

module.exports = {
  entry: './src/index.jsx', // 入口文件
  // 出口文件
  output: {
    path: path.resolve(__dirname, 'dist'), // 相对的出口文件路径
    filename: 'boundle.js', // 构建好的文件名称
  },
  mode: 'production', // 构建模式，分为development，production,none
  // 读取解析规则
  module: {
    rules: [
      {
        test: /\.(js|jsx)$/,
        exclude: /node_modules/,
        use: 'babel-loader', // 用于解析es6新语法，浏览器不能识别的，转换成浏览器可以识别javascript，等相关语法转移
      },
      {
        test: /\.less$/,
        use: ['style-loader', 'css-loader', 'less-loader'], // 注意的是依赖数组顺序不能改变，从后向前执行
      },
      {
        test: /\.(png|pneg|jpg|jpeg)$/,
        use: 'file-loader', // 解析图片
      },
    ],
  },
};

注意：配置需要安装依赖，此时将不一一写出来，根据错误提示安装依赖。

babel-loader 官网链接 babeljs.io/docs/en/bab… 可以查看具体配置，使用babel-loader 需要配置.babelrc 文件，将配置写在里面。

总结

此文章未完待续，嘿嘿嘿，我在学习，将继续补充，初出文章，略有不足，欢迎指出。