使用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