使用webpack4一步步搭建react项目（一）

平时都是用命令行工具一键生成项目，没有机会使用webpack从头至尾搭建项目。

通过几天的学习，决定用webpack搭建一个React项目，并将搭建过程记录下来，与你们一块儿交流分享。菜鸡一枚，若是那里有错误，但愿你们帮忙指出。

本篇文章会被分红三章，每一章都有一个主题。

第一章 搭建项目雏形

项目结构

代码

项目代码 Github 仓库

初始化项目

mkdir diy-webpack-for-react
cd diy-webpack-for-react
npm init -y
复制代码

添加.gitignore文件

node_modules
/dist

.idea
.vscode
复制代码

初始化git仓库

git init
复制代码

安装webpack

npm i webpack webpack-cli -D
复制代码

配置webpack.config.js

配置思路

• 配置入口（entry）
• 配置输出（output）
• 配置各类资源加载的loader
• 使用HtmlWebpackPlugin将打包后的js入口文件的脚本注入到html模板中

安装依赖

• babel-loader @babel/core @babel/preset-env @babel/preset-react
• style-loader css-loader
• url-loader
• html-webpack-plugin

webpack.config.js代码

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

module.exports = {
  // 设置为生产（production）模式
  // 生产模式默认会将js代码压缩
  // 若是你好奇打包后的文件长什么样
  // 能够将mode设置为"development"，将devtool设为"none"
  mode: "production",
  // 设置入口文件
  entry: "./src/index.js",
  output: {
    // 设置出口文件名
    filename: "main.js",
    // 设置出口文件的目录
    path: path.resolve(__dirname, "dist"),
    publicPath: "/"
  },
  resolve: {
    // 设置扩展，这样导入文件时能够省去写扩展名
    extensions: [".js", ".json", ".jsx"]
  },
  module: {
    rules: [
      {
       // 对".js"或".jsx"结尾的文件使用babel-loader进行转译
       // babel-loader的配置放到".babelrc"文件内
        test: /\.jsx?$/,
        use: "babel-loader"
      },
      {
        // 对css文件前后使用css-loader和style-loader
        // css-loader能够将导入项目的css变为js模块
        // style-loader能够让页面打开时，利用js将css模块
        // 内的样式注入到html头部的style标签内
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      {
        // 使用file-loader来加载图片文件
        test: /\.(png|jpg|jpeg|svg|gif)$/,
        use: "file-loader"
      }
    ]
  },
  plugins: [
    // 该插件能将生成的入口js文件注入到模板html内
    new HtmlWebpackPlugin({
      // 设置模板的路径
      template: "./src/template.html",
      // 设置favicon的路径
      favicon: "./src/assets/favicon-32x32-next.png"
    })
  ]
};
复制代码

配置.babelrc

咱们须要配置.babelrc文件，来告诉babel咱们要使用的presets。

{
  "presets": ["@babel/preset-env", "@babel/preset-react"]
}
复制代码

配置npm脚本

在npm内添加如下脚本，方便开发使用

// ...
"scripts": {
  "build": "webpack --config webpack.config.js",
  "serve:dist": "npx http-server-spa ./dist"
}
// ...
复制代码

使用 npm run build，打包项目。使用npm run serve:dist,将打包后的文件跑起来。

结尾

一个简单的webpack配置完成了。

安装react和react-dom就能够开始写代码了。

npm i react react-dom
复制代码

下一章节内容：将配置文件拆分为webpack.common.js webpack.dev.js webpack.prod.js来针对不一样的场景；使用webpack-dev-server启动开发服务器；优化生产环境的打包文件。

其余章节

• 第一章 搭建项目雏形
• 第二章 拆分webpack配置
• 第三章 改善项目

参考

Learn Webpack

Webpack 的 Bundle Split 和 Code Split 区别和应用

webpack guides

learn Webpack step by step