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-rve:

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

cnpm install webpack-dev-rver -D

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

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

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

    devServer: {         port: 8888, //开启的端口号        contentBa: "./pudnf85版本剑神刷图加点blic", //指定本地服务的静态资源目录        open: true,    }

4.命令行开启

npm start

plugins

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

html-webpack-plugin:

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

 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时，自动帮我们清理dist1.安装

 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)    contentBa: "./public", //指定本地服务的静态资源目录}

loaders:webpack

可以使用 loader 来预处理文件。这允许你打包除 JavaScript 之外的任何静态资源。指在main.js中可以引入其他文件。比如aet/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$/, u: ['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 -gyarn add node-sass -D

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

{  test: /\.scss$/, u: ['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)$/, u: ['file-loader'] }

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

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

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

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

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

  module.exports = {     //pret: 是Babel对不同版本的JS语法的一种支持编译。 ES6 JSX ts CoffeeScript    //plugin: 是用于某些特殊语法的支持和编译    "prets": ["@babel/pret-env","@babel/pret-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

{红磷燃烧的现象  "parrOptions": {      "ecmaVersion": 6,     "sour校训校风ceType": "module",     "ecmaFeatures": {          "jsx": true     }   },   "rules": {        "mi": "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 rve --config react.config.js"}

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

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

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