webpack 5 最新版 5分钟快速上手

webpack

作用：

• 是当下前端工程化环境中使用最为广泛的构建工具。它的作用是把比较新的前端技术和文件模块、编译成浏览器能够识别、并尽可能兼容主流浏览器的代码(Html、css、ES5),它就是一个打包器

安装

• webpack 是核心库，它提供了很多API，可以用于编程
• webpack-cli 是命令行工具，它提供了一些很好用的命令行
• 可以使用npm安装；建议切换成淘宝镜像会比较快cnpm

    cnpm install webpack -g
    cnpm install webpack -D
    cnpm install webpack-cli -g
    cnpm install webpack-cli -D

配置文件

• 项目的入口和出口在这里运行。
• 前端项目都运行在node.js环境中，这个配置文件是项目运行或打包时执行的
• 它的语法是CommonJs模块化语法
• 项目文件都与main.js关联起来，从入口进入，一层一层运行把它变成浏览器能够识别的玩意后从出口输出到dist这个文件夹中

使用配置文件

• webpack运行或打包时，默认使用 webpack.config.js这个文件
• 1.在项目的根目录新建react.config.js文件

      const path = require('path')
      module.exports = {
          //   入口
      // entry: path.resolve(__dirname, './src/main.js'),
      entry: {
          //给入口文件起个名字叫app
          app: path.resolve(__dirname, './src/main.js')
              //可以写绝对路径或相对路径
      },
      //出口
      output: {
          filename: '[name]. [chunkhash].js', //将代码中一堆文件打包成一捆,打包好的文件名第一个是name,第二个是hash值
          path: path.resolve(__dirname, './dist') //只能写绝对路径
        }
       }

• 2.package.json中’scripts’内更改：
  "build": "webpack --config react.config.js"

• 3.命令行开启
  npm run build

webpack-dev-serve:

• 它是使用express编写的用于创建本地node服务的第三方包。一个小型的node.js Express服务器。简单来说，就是一个小型的静态文件服务器
• 1.安装

  cnpm install webpack-dev-server -D
  

• 2.package.json中’scripts’内添加：

```
"start": "webpack serve --config react.config.js"
```

• 3.react.config.js中添加devServer对象进行配置

      devServer: {
          port: 8888, //开启的端口号
          contentBase: "./public", //指定本地服务的静态资源目录
          open: true,
      }
  

• 4.命令行开启

  npm start
  

plugins

• 用于把打包后的js/css等资源，自动插入到public/index.html中。

html-webpack-plugin:

• 把打包好的静态资源和指定的html关联起来。
• 1. 安装

   cnpm install html-webpack-plugin -D
  

• 2.react.config.js中

   const HtmlWebpackPlugin = require('html-webpack-plugin')
   ...
   plugins: [
      new HtmlWebpackPlugin({ //把打包完的静态资源和指定的html关联起来
          template: path.resolve(__dirname, 'public/index.html'),
          title: 'React'
      }),
  ]
  

clean-webpack-plugin

• 在每次执行npm run build时，自动帮我们清理dist
• 1.安装

   cnpm install clean-webpack-plugin -D
  

• 2.react.config.js中

   const { CleanWebpackPlugin } = require('clean-webpack-plugin');
   ...
   plugins: [
      new HtmlWebpackPlugin({ //把打包完的静态资源和指定的html关联起来
          template: path.resolve(__dirname, 'public/index.html'),
          title: 'React'
      }),
      new CleanWebpackPlugin()
  ]
  

HMR(Hot Module Replacement):模块热替换(热更新)

• 1.react.config.js中

  const webpack = require('webpack');
  devServer: {
      port: 8888, //开启的端口号
      open: true,
      hot: true, 实现HMR(Hot Module Replacement)
      contentBase: "./public", //指定本地服务的静态资源目录
  }
  

loaders:webpack

• 可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。指在main.js中可以引入其他文件。比如aseet/css/common.css通过loader与public/index.html关联。
• 在webpack眼中一切皆模块。webpack根据你定义的规则来编译各种不同后缀的模块。
• 一、css：
  • 在module中定义规则，来编译css模块
  • style-loader：将模块导出作为样式添加到DOM中
  • css-loader:编译css文件后，使用import加载，并返回css代码
  • 反向执行
  • 1.安装style-loader css-loader

    cnpm install style-loader css-loader -D
    

  • 2.react.config.js中

      module: {
          rules: [
          { test: /\.css$/, use: ['style-loader', 'css-loader'] } //在main.js中导入的文件是以.css结尾的
        ]
      }
    

  • 二、Sass:

    • 1.安装node-sass sass-loader

      cnpm install sass-loader node-sass -D
      

    • 如果node-sass装不成功，换成yarn包管理工具

      npm i yarn -g
      yarn add node-sass -D
      

    • 2.react.config.js中 module: { rules:[ ]}内

      { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }
      

    • 三、img

    • 1.安装

      cnpm install file-loader -D
      

    • 2.react.config.js中 module: { rules:[ ]}内

        { test: /\.(png|svg|jpg|jpeg|gif)$/, use: ['file-loader'] }
      

  • 四、babel:js编译，把ES6语法转化成主流浏览器兼容的代码
    • 1.安装 babel-loader:用于加载.js文件，并交给@babel/*编译器 @babel/core:babel的核心库、 @babel/preset-env：编译大多数es6代码成主流浏览器能兼容的ES5代码、@babel/preset-react:编译jsx代码

       cnpm install babel-loader -D
       cnpm install @babel/core -D
       cnpm install @babel/preset-env -D
       cnpm isntall @babel/preset-react -D
      

    • 2.react.config.js中 module: { rules:[ ]}内

        //在处理js模块时，为了让编译速度更快，用exclude忽略node_modules包
      { test: /\.(js|jsx)$/, use: ['babel-loader'], exclude: /node_modules/ },
      

    • 3.根目录下创建babel.config.js

        module.exports = {
          //preset: 是Babel对不同版本的JS语法的一种支持编译。 ES6 JSX ts CoffeeScript
          //plugin: 是用于某些特殊语法的支持和编译
          "presets": ["@babel/preset-env","@babel/preset-react"] //编译大多数的es6、jsx
      }
      

  • 五、ESlint:检测JS语法规范
    • 1.安装

       cnpm install eslint-webpack-plugin  -D
       cnpm isntall eslint -D
      

    • 2.react.config.js中引入， plugins: []内

      const ESLintPlugin = require('eslint-webpack-plugin')
      
       new ESLintPlugin({
            exclude: ['node_modules'],
            fix: true, //自动修复错误，不建议使用
       })
      

    • 3.根目录下创建.eslintrc.json

      {
       "parserOptions": {
           "ecmaVersion": 6,
           "sourceType": "module",
           "ecmaFeatures": {
               "jsx": true
           }
         },
         "rules": {
             "semi": "error"//不加分号，报错  off:关闭 wran:警告 error：报错
             // "no-console":2 //0:不报错 1：警告 2：报错
         }
       }
      

      • 4.如果要忽略eslint错误，可以在需要忽略的代码后面添加注释//eslint-disable-line，如果是一大块代码可以用注释包裹：/eslint-disable/ … /eslint-enable/
  • 六、区分开发环境和生产环境
    • 1.安装(cross-env:在node.js环境进程中添加环境变量)

       cnpm isntall cross-env -D
      

    • 2.package.json中

        "scripts": {
          "build": "cross-env NODE_ENV=production webpack --config react.config.js",
          "start": "cross-env NODE_ENV=development webpack serve --config react.config.js"
      }
      

    • 3. react.config.json中：判断进程的环境是生产环境还是开发环境，生产环境和开发环境执行的代码不同

      const isDev = process.env.NODE_ENV === 'development'
      

      • 代码初始是生产环境的配置，经过判断后如果是开发环境，则将与生产环境中不同的代码覆盖。代码详情见react.config.js文件
  • 七、resolve:
    • 1.定义绝对路径@：通过alias
    • 2.定义文件后缀名省略：extensions

    resolve:{
      alias:{
        '@':path.resolve(__dirname,'src')
      },
       extensions: ['.js', '.jsx', '.css', '.vue', '.ts', '.scss'] //配置省略.xx后缀
    }
    

  • 八、source-map小警告：在开发环境配置中添加config.devtool=‘source-map’
  • devtool作用:当程序报错时，会显示错误在源码中的位置， 否则显示在编译后代码最后的位置

本文地址：https://blog.csdn.net/xbczrz/article/details/111052857