webpack搭建react开发环境

官方文档

中文官网: https://www.webpackjs.com/ 文档更新稍有不及时
英文官网: https://webpack.js.org/

安装

1. 项目初始化

npm init --yes 

2. 安装webpack

npm install --save-dev webpack 

3. 使用webpack 命令

默认入口为 src/index.js
默认出口为 dist/main.js
  "scripts": {
    "webpack": "webpack",
  }

4. 使用config配置文件

默认读取当前 当前目录下 webpack.config.js
可以通过 --config 属性指定读取某一个配置文件
  "scripts": {
    "default": "webpack"
    "build": "webpack --config ./config/webpack.pro.config.js",
  },

注：建议使用项目依赖安装而非全局安装，不同项目依赖的版本不相同

config配置文件使用

Mode 模式

通过选择 development 或 production 之中的一个，来设置 mode 参数，你可以启用相应模式下的 webpack 内置的优化

module.exports = {
  mode: 'production'
};

Entry 入口配置

入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点（直接和间接）依赖的。

1. 单入口

module.exports = {
  entry: './path/to/my/entry/file.js'
};

OutPut 出口配置

output 属性告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程：

1.单出口

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  }
};

2. 多入口多出口

{
  entry: {
    app: './src/app.js',
    search: './src/search.js'
  },
  output: {
    filename: '[name].js',
    path: __dirname + '/dist'
  }
}

Loader

loader 用于对模块的源代码进行转换。loader 可以使你在 import 或"加载"模块时预处理文件。因此，loader 类似于其他构建工具中“任务(task)”，并提供了处理前端构建步骤的强大方法。loader 可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL。loader 甚至允许你直接在 JavaScript 模块中 import CSS文件！

解析import 样式文件

  module: {
    rules: [
      //解析css
      {
        test: /\.(css)$/,
        exclude: /(node_modules)/,
        use: ["style-loader", "css-loader"],
        // loader的使用方式从后往前
      },
      // 解析less
      {
        test: /\.(less)$/,
        exclude: /(node_modules)/,
        use: [
          "style-loader",
          {
            loader: "css-loader",
            options: {
              modules: true, // 样式模块化
            },
          },
          "less-loader",
        ],
      },
    ],
  }

解析图片

  module: {
    rules: [
     {
        test: /\.(png|jpg|jpeg)$/,
        exclude: /(node_modules)/,
        type: "asset", // 根据图片的尺寸判断是移动文件 还是变成base64
        parser: {
          dataUrlCondition: {
            maxSize: 4 * 1024,
          },
        },
        // type: 'asset/resource', //将图片处理移动
        // type: "asset/inline",   // 变成base64
        // use:["url-loader","file-loader"]
      },
    ],
  }

解析jsx

  module: {
    rules: [
     // 解析react jsx
      {
        test: /\.(js|jsx)$/, // 要使用的文件后缀
        exclude: /(node_modules|bower_components)/, // 取出某些目录不检测
        use: {
          loader: "babel-loader", //使用loader 解析js文件
          options: {
            // presets: ["@babel/preset-env", "@babel/preset-react"],
            presets: ["@babel/preset-env"],
            plugins: ["@babel/plugin-transform-react-jsx"]
          },
        },
      },
    ],
  }

loader 特点

• loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
• loader 可以是同步的，也可以是异步的。
• loader 运行在 Node.js 中，并且能够执行任何可能的操作。
• loader 接收查询参数。用于对 loader 传递配置。
• loader 也能够使用 options 对象进行配置。
• 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
• 插件(plugin)可以为 loader 带来更多特性。
• loader 能够产生额外的任意文件。
• loader 通过（loader）预处理函数，为 JavaScript 生态系统提供了更多能力。 用户现在可以更加灵活地引入细粒度逻辑，例如压缩、打包、语言翻译和其他更多。

插件(plugins)

插件是 webpack 的支柱功能。webpack 自身也是构建于，你在 webpack 配置中用到的相同的插件系统之上！
插件目的在于解决 loader 无法实现的其他事。

html管理插件

const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'main.js',
    path: path.resolve(__dirname, '../dist'),
    clean: true, // 打包之前将原先的dist文件删除
  },
  mode: "production",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({
      title: "管理输出",
      template: "./public/index.html",
      filename: "index.html",
      inject: "body",
    }),
  ],
 }

本地服务器配置

开发阶段通过本地服务器实现代理等一些列功能

1. 安装

 npm install webpack-dev-server -D

2. 配置config文件

devServer: {
    static: "./dist", // 本地服务器访问的目录
    port: 5201, // 端口号
    proxy: {},  // 代理
  }

3. 运行

{
  "scripts": {
    "dev": "webpack server --config ./config/webpack.dev.config.js",
  }
}