29.9React課程

第06節：工程化webpack

(第6節：react最佳實踐&)

第6節：react最佳實踐&

安裝webpack推薦使用局部安裝

生成package.json包描述規范文件夾，-D --save -dev的簡寫

指定webpack的版本

npx是npm的另一種實現，去node_module去找而不是去全局尋找webpack

打包輸出目錄是dist壓縮后

有webpack.config.js安裝我們的配置

webpack.config.js

webpack基于nodeJs ，path專門解析路徑的，_dirname當前模塊配置文件的絕對路徑與dist路徑拼接

test指定匹配規則，file-loader處理靜態資源，把所有圖片都放在outputPath路徑下

//webpack.config.js
// webpack進行打包會去根路徑查找webpack.config.js，如果沒有才會使用默認配置

//引入插件
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const htmlWebpackPlugin = require("html-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");

//webpack配置就是對象{}
const path = require("path");
module.exports = {
  //定義入口
  entry: "./src/index.js",
  //輸出結構
  output: {
    //輸出路徑,必須是絕對路徑 /dist/
    path: path.resolve(__dirname, "./dist"),
    //輸出文件的名稱
    filename: "main.js"
  },
  //打包模式，是生產環境還是開發環境
  mode: "development",
  //模塊解析
  module: {
    rules: [
      {
        test: /\.(png|jpe?g|gif)$/,
        use: {
          loader: "url-loader",
          //loader可以配置參數
          options: {
            //靜態資源名稱
            //占位符號
            name: "[name]_[hash:6].[ext]",
            outputPath: "images/",
            //當圖片小于limit設置的尺寸，會被轉化為base64格式，大于limit才會以獨立文件展示
            limit: 2048
          }
        }
      },
      {
        test: /\.(eot|ttf|woff|woff2|svg)$/,
        use: {
          loader: "file-loader"
        }
      },
      //當webpack遇到不認識的模塊，我們需要用正確loader來處理
      {
        test: /\.css$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: [
                require("autoprefixer")({
                  overrideBrowserslist: ["last 2 versions", ">1%"]
                })
              ]
            }
          }
        ]
      },
      {
        test: /\.less$/,
        use: [
          MiniCssExtractPlugin.loader,
          "css-loader",
          {
            loader: "postcss-loader",
            options: {
              plugins: () => {
                require("autoprefixer")({
                  overrideBrowserslist: ["last 2 versions", ">1%"] //autoprefixer新版本中browsers替換成overrideBrowserslist
                });
              }
            }
          },
          "less-loader"
        ]
      }
    ]
  },
  //插件擴展配置
  plugins: [
    new CleanWebpackPlugin(),
    new htmlWebpackPlugin({
      title: "webpack 首頁",
      filename: "index.html",
      template: "./src/index.html",
      inject: "head"
    }),
    new MiniCssExtractPlugin({
      filename: "[name].css"
    })
  ]
};

index.js，非js格式pic要用file-loader處理

//0配置只支持js模塊
import "./index.css";
import "./index.less";
import pic from "./logo.png";

var img = new Image();
//pic其實是路徑
console.log(pic);
img.src = pic;
// img.classList.add("logo");

var root = document.getElementById("root");
root.append(img);

console.log("hello webpack4.41");
//webpack的默認配置
//1.就是定義好入口文件
//  /src/index.js
//2.定義好輸出目錄和文件
// 目錄： /dist
// 文件：main.js
//3.定義好環境

指定其他配置文件

myConfig.js

const path = require("path");
module.exports = {
  //定義入口
  entry: "./src/index.js",
  //輸出結構
  output: {
    //輸出路徑,必須是絕對路徑 /dist/
    path: path.resolve(__dirname, "./build"),
    //輸出文件的名稱
    filename: "main.js"
  },
  //打包模式，是生產環境還是開發環境
  mode: "development"
  //模塊解析
  // module:{

  // },
  //插件擴展配置
  // plugins:[]
};

概念

、

production優化技巧，代碼壓縮，去掉冗余代碼

index.css

@font-face {
  font-family: "webfont";
  font-display: swap;
  src: url("webfont.woff2") format("woff2");
}

body {
  background: "red";
  font-family: "webfont" !important;
  display: flex;
  color: blue;
}