前端工程化

介绍

webpack安装

支持符合ES5规范的浏览器
但是import promise
就要使用下面,让旧浏览器也支持

webpack核心概念

https://www.webpackjs.com/

webpack4之后webpack和webpack-cli已经分离开来了

Loader和plugins区别

Loader处理的是webpack不能处理的文件(除了js外)
plugins做一些更加复杂的内容

npm init -y

快速初始化项目

npm install webpack webpack-cli -D

yarn add webpack webpack-cli -D

npx webpack --version

方式一: ./node_moudles/.bin/webpack --version
npm5以后提供npx指令

npm install webpack -g

全局安装webpack

yarn global add webpack webpack-cli

配置

入口起点 entry points

输出 output

loader

js是不认识css或者其他文件的,使用loader解决

在这里插入图片描述

yarn add css-loader style-loader -D

• src/index.css

body {
	background : blue;
}

• index.js

require("./index.css")

如果换位置就会报错

如果

yarn add sass-loader -D

yarn add sass -D

npm run build

plugins

yarn add html-webpack-plugin -D

npm run watch

修改js

HMR

模块热替换
配合webpack-dev-server或者webpack-dev-middleware使用,webpack-dev-server启动了一个运行环境,让webpack可以直接在浏览器执行刷新操作

yarn add webpack-dev-server -D

npm run hot

mode

production

development

process.env.NODE_ENV

babel

让webpack支持ES6特性

安装

 yarn add babel-loader @babel/core @babel/preset-env @babel/plugin-transform-runtime -D
 yarn add @babel/runtime -S

根目录创建.babelrc

{
  "presets": ["@babel/preset-env"],
  "plugins": ["@babel/plugin-transform-runtime"]
}

配置webpack.js rules

      {
        test: /\.js$/,
        loader: "babel-loader",
      },

测试

注意

clean-webpack-plugin

清除我们构建文件夹

https://github.com/johnagan/clean-webpack-plugin

yarn add clean-webpack-plugin -D

配置webpack.config.js

const { CleanWebpackPlugin } = require("clean-webpack-plugin");

copy-webpack-plugin

复制一些静态资源文件

yarn add copy-webpack-plugin -D

配置webpack.config.js

const CopyWebpackPlugin = require("copy-webpack-plugin");

new CopyWebpackPlugin([
  {
    from: path.join(__dirname, "assets"),
    to: "assets",
  },
]),

测试

terser-webpack-plugin

该插件使用 terser 来压缩 JavaScript。
如果你使用的是 webpack v5 或以上版本，你不需要安装这个插件。webpack v5 自带最新的 terser-webpack-plugin。如果使用 webpack v4，则必须安装 terser-webpack-plugin v4 的版本。

yarn add terser-webpack-plugin -D

optimize-css-assets-webpack-plugin

一个用于优化\最小化 CSS 资产的 Webpack 插件。
⚠️对于 webpack v5 或更高版本，请改用css-minimizer-webpack-plugin。

yarn add optimize-css-assets-webpack-plugin -D

mini-css-extract-plugin

yarn add mini-css-extract-plugin -D

上面三个一起引入

const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

上面三个一起配置

// 修改scss规则
    rules: [
      {
        test: /\.(scss|sass)$/,
        // use: ["style-loader", "css-loader", "sass-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },

// 添加css
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },

与module/plugins/devServer同级

  optimization: {
    minimizer: [new TerserPlugin({}), new OptimizeCssAssetsPlugin({})],
  },

配置plugins

  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),

上面三个压缩一起测试

webpack应用总结

配置代码

const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
const CopyWebpackPlugin = require("copy-webpack-plugin");
const TerserPlugin = require("terser-webpack-plugin");
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
const OptimizeCssAssetsPlugin = require("optimize-css-assets-webpack-plugin");

const config = {
  mode: "production",
  entry: "./src/index.js",
  output: {
    filename: "bundle.js",
    path: path.join(__dirname, "./dist"),
  },
  module: {
    rules: [
      {
        test: /\.(scss|sass)$/,
        // use: ["style-loader", "css-loader", "sass-loader"],
        use: [MiniCssExtractPlugin.loader, "css-loader", "sass-loader"],
      },
      {
        test: /\.js$/,
        loader: "babel-loader",
      },
      {
        test: /\.css$/,
        use: [MiniCssExtractPlugin.loader, "css-loader"],
      },
    ],
  },
  optimization: {
    minimizer: [new TerserPlugin({}), new OptimizeCssAssetsPlugin({})],
  },
  devServer: {
    hot: true,
  },
  plugins: [
    new MiniCssExtractPlugin({
      filename: "[name].css",
      chunkFilename: "[id].css",
    }),
    new HtmlWebpackPlugin({
      filename: "index.html",
      template: "template.html",
    }),
    new webpack.HotModuleReplacementPlugin(),
    new CleanWebpackPlugin(),
    // new CopyWebpackPlugin([
    //   {
    //     from: path.join(__dirname, "assets"),
    //     to: "assets",
    //   },
    // ]),
    new CopyWebpackPlugin({
      patterns: [
        {
          from: path.join(__dirname, "assets"),
          to: "assets",
        },
      ],
    }),
  ],
};

module.exports = config;