React-webpack最佳实践

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;
}