webpack配置React开发详解版

女爷i 2022-02-27 23:24 343阅读 0赞

### 文档 ###

[React官方文档的学习][React]  
[webpack的配置][webpack]  
[webpack的babel-loader的配置][webpack_babel-loader]

### 文件夹的解释 ###

![这是文件夹的主要目录][20190323122431710.png]

1.  dist用来放入打包后的文件（生产时）
2.  src这是我们开发时的文件（css和less主要是这里用来测试的）
3.  index.html（我们的页面，放一个容器来让其他元素渲染进去）

1.  webpack.config.js是我们的配置文件

const path = require('path') //使用node的path模块，来操作文件路径
    module.exports = { 
        entry:path.join(),
        output:{ 
        },
        plugins:[
        ],
        module: { 
            rules: [      
            ]
          }
    }

### webpack入口出口配置 ###

*  **entry**:入口起点，来构建webpack其作为依赖图的开始，进入入口起点后，webpack会找出哪些模块和库是入口起点依赖的,这里是main.js

entry:path.join(__dirname,'/src/main.js'),

*  **output**:告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件,这里我们使用output.filename 和 output.path 属性，来告诉 webpack bundle 的名称，以及我们想要 bundle 生成(emit)到哪里。

output:{ 
            path:path.join(__dirname,'/dist'),
            filename:'bundle.js'
        },

### webpack和package.json和插件 ###

*  下载package.json;这里用来存放我们开发环境和生产环境需要的包和配置，不使用-y是选择自己配置，在项目根目录运行它

cnpm init -y

*  下载webpack-dev-server：我们每次都要使用webpack进行打包编译，比较麻烦，所以我们使用该包来实现打包编译；它会将编译的文件注入内存，这样速度会比较快

cnpm i webpack-dev-server  -D

*  同时，使用html-webpack-plugin插件配置启动页面,如果我们只使用webpack-dev-server该包的话还要配置–contentBase指定启动目录指令比较繁琐，所以使用该包会自主在内存帮我们注入，不用我们手动注入

cnpm i html-webpack-plugin -D

*  接下来看一下package.json查看开发依赖,看看是否成功下载

"devDependencies": { 
        "html-webpack-plugin": "^3.2.0",
        "webpack-dev-server": "^3.2.1"
      }

*  别忘记安装webpack和webpack-cli，这两个包以前是一起的，后来分开

cnpm i webpack webpack-cli -D

*  如果你之前没有全局安装过webpack还需要在安装

cnpm i webpack webpack-cli -g

#### 接下来配置插件并启动 ####

##### html-webpack-plugin的配置 #####

template属性是配置模板路径，filename是在内存中生成HTML文件的名称，并且会在内存会注入bundle.js（这是我们之前设置的出口文件名）

const path = require('path') //使用node的path模块，来构建路径
    const htmlWebpackPlugin = require('html-webpack-plugin')
    ......
       plugins:[
            new htmlWebpackPlugin({ 
                template:path.join(__dirname,'/src/index.html'),
                filename:'index.html'
            })
        ],

##### webpack-dev-server #####

1.  第一种方式：可以在webpack.config.js进行配置  
    [不懂可以点击看webpack的devServer文档，后面也有解释][webpack_devServer]

module.exports = { 
      //...
         devServer:{ 
            hot:true,
            open:true,
            port:3005
        }
    };

还需要在package.json配置scripts

"scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server"
      },

此时可以先运行项目查看

cnpm run dev

![这是成功启动][20190323162725715.png]  
2. 第二种方式，如果不需要配置proxy等等其他配置，也可以全部在package.json里面进行配置(推荐这种，两种看一种即可)

"scripts": { 
        "test": "echo \"Error: no test specified\" && exit 1",
        "dev": "webpack-dev-server --open --port 3000 --hot"
      },

open:实现自动帮我们打开浏览器；hot：启用浏览器自主更新，实现热更新。在JS可能没那么不明显；port是设置我们的端口号，有时候可能冲突可以在这里设置。接下来依旧运行`cnpm run dev`测试一下

### webpack中loader ###

> loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

#### 使用webpack打包css、less文件、scss文件 ####

1.  运行`cnpm i style-loader css-loader --save-dev`,然后在webpack进行配置解析css文件

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

test:于标识出应该被对应的 loader 进行转换的某个或某些文件。（这里是一个正则表达式，点号".“匹配除“\\n”之外的任何单个字符。所以要使用反斜杠“\\”，”$"以什么结尾）  
use:表示进行转换时，使用到的loader。（注意顺序不能调换，loader模块的调用顺序是从后向前调用的，调换会报错）

1.  运行`cnpm i less less-loader -D`,配置less文件

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

在main.js引入并进行测试

import './css/index.css'
    import './less/index.less'

如果想要启用 CSS 模块化，可以为 css-loader 添加 modules 参数即可,这里添加一个五位的哈希值，因为React不像Vue组件一样有scoped属性，所以可能有时需要模块化

{  test: /\.css$/, use: ['style-loader', 'css-loader?modules&localIdentName=[name]_[local]-[hash:5]'] },

1.  运行`cnpm i sass-loader node-sass --save-dev`打包scss文件

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

#### 图片文件 ####

运行`cnpm i file-loader url-loader -D`

{ test:/\.(png|gif|bmp|jpg|jpeg)$/,use:'url-loader?limit=5000&name=[hash:8]-[name].[ext]'}

因为我们的图片都会转换为base64编码，所以使用limit进行限制；使其不转换。name则给定名字；防止图片名重复，所以使用哈希值

#### 字体文件 ####

{ test:/\.(ttf|eot|svg|woff|woff2)$/,use:'url-loader'},

#### 使用babel处理JS更高级的语法 ####

webpack只能处理一部分es6语法，一些高级的es6语法和es7语法是无法处理的，这时候需要第三方的babel来处理把高级语法处理成更低级语法，交给webpack打包成bundle.js

1.  第一种方式:使用.babelrc文件进行配置  
    下载两套包，这是原先版本的包

cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
    cnpm i babel-preset-env babel-preset-stage-0 -D

第一套包是转换，第二套相当于字典，包含所有和es相关的语法  
**新建一个.babelrc文件，这是个json文件，在里面相关配置**

{ 
      "presets": ["env", "stage-0"],
      "plugins": ["transform-runtime"]
    }

**在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node\_modules文件夹添加到排除项：**

{ test:/\.js$/,use:'babel-loader',exclude:/node_modules/},

1.  第二种方式：新版本的配置（这里没使用.babelrc）  
    [babel-loader文档配置][webpack_babel-loader]

cnpm install babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env -D

{ 
                test:/\.js$/,
                use: { 
                    loader: 'babel-loader',
                    options: { 
                      presets: ['@babel/preset-env']
                    }
                  },
                exclude: /node_modules/,        
            },

babel 在每个文件都插入了辅助代码，使代码体积过大！下面的配置禁用了 babel 自动对每个文件的 runtime 注入，而是引入 babel-plugin-transform-runtime 并且使所有辅助代码从这里引用。babel-runtime 安装为一个依赖。

cnpm install @babel/plugin-transform-runtime --save-dev
    cnpm i @babel/runtime -S

在webpack进行配置

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

### 配置使用React ###

安装两套包

cnpm i react -S
    cnpm i react-dom -S

react这套包是用来创建组件，组件生命周期等等  
react-dom主要封装了dom操作相关的包，比如把dom渲染到界面上

#### 使用JSX ####

##### 上面使用.babelrc配置文件的 #####

cnpm i babel-preset-react -D

{ 
      "presets": ["env", "stage-0", "react"],
      "plugins": ["transform-runtime"]
    }

##### 上面只使用webpack配置的 #####

cnpm i @babel/preset-react -D

更改上面的配置即可

{ 
          test:/\.jsx?$/,
          use: { 
                loader: 'babel-loader',
                options: { 
                    presets: ['@babel/preset-env','@babel/preset-react'],
                    plugins: ['@babel/transform-runtime']
                 }
           },
            exclude: /node_modules/,        
           },

### 需要下载的包 ###

初始化webpack文件

cnpm init -y

cnpm i webpack webpack-cli webpack-dev-server html-webpack-plugin style-loader css-loader less-loader less sass-loader node-sass file-loader url-loader babel-loader@8.0.0-beta.0 @babel/core @babel/preset-env  @babel/plugin-transform-runtime @babel/preset-react -D

cnpm i react react-dom @babel/runtime -S

### 终于写好了 ###

不要掌声，不要鲜花，不要脸…但是要赞  
可以直接在后台运行`webpack`将项目进行打包，后天写个生产环境版的进行打包…

[React]: https://react.docschina.org/docs/hello-world.html
[webpack]: https://www.webpackjs.com/concepts/
[webpack_babel-loader]: https://www.webpackjs.com/loaders/babel-loader/#%E5%AE%89%E8%A3%85
[20190323122431710.png]: /images/20220228/8d8ce8e66b77469291d162cc173a3396.png
[webpack_devServer]: https://webpack.js.org/configuration/dev-server/#root
[20190323162725715.png]: /images/20220228/7ce3253227234685a75e29aa6d50b0ff.png