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"
}
```
- 1. 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

黄山市民网：https://www.huangshanshimin.com/

webpack

作用：

安装

配置文件

使用配置文件

webpack-dev-serve:

plugins

html-webpack-plugin:

clean-webpack-plugin

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

loaders:webpack

相关文章