一文搞定react环境的搭建（上）

webpack

概念

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。

四个核心概念

• 入口（entry）：指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始

• 输出（output）：告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件，默认值为 ./dist

• loader：让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）

• 插件（plugins）：范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务

起步

1. 新建目录react-stack

2. 在此文件夹打开cmd/git bash输入，npm init -y初始化npm，生成package.json文件

3. 创建好配置文件package.json后就可以开始安装webpack了，在命令行输入npm i webpack -g和npm i webpack-cli -g全局安装

4. 安装完毕后，在react-stack根目录创建public文件夹，并在文件夹中创建index.html文件，里面写一些必要的html结构代码

5. 再回到项目文件的根目录下，创建src目录，里面创建assets文件夹和一个main.js文件，main.js文件代码会应用到上个步骤中的index.html中相当于一个模块。assets文件夹中创建css/style.css文件或者common.scss文件

6. 在react-stack根目录创建webpack.config.js配置文件，文件主要由两个部分构成，分为引入和抛出。其中module.exports包含着四个核心

   // webpack.config.js
   // 基于nonde.js环境
   const path = require('path')
   
   // 自动生成一个index.html单页面，并且把打包后的js文件放进去
   const HtmlpWebpackPlugin = require('html-webpack-plugin')
   
   // 在生成dist时，自动清除上一次的dist
   const { CleanWebpackPlugin } = require('clean-webpack-plugin')
   const webpack = require('webpack')
   
   module.exports = {
       mode: "production",
       // 入口：指定webpack打包或本地服务器运行时的程序路口文件
       // 绝对路径
       entry: path.resolve(__dirname, './src/main.js'),
   
       // 出口：打包之后，打包的结果放在那里 dist
       output: {
           filename: 'bundle.js',
           // filename: '[name]-[hash].js',// 哈希值的写法，输出为main-哈希值.js
           // 只能使用绝对路径
           path: path.resolve(__dirname, 'dist'),
       },
       // plugins：用于扩展功能
       plugins: [
   
       ],
       // loader：用于对代码中的各种文件进行编译转换，目标是转换成浏览器能够识别的代码
       module: {
           rules: [
   
           ]
       },
       devtool: 'inline-source-map', // 用于发现报错的位置
       devServer: {
   
       }
   }
   

配置

1. webpack.config.js配置文件中分别用到了：

   • pathnode自带的路径模块，直接引入即可，主要作用是绝对路径

   • html-webpack-plugin模块，可以直接用npm下载，其主要作用为自动生成一个index.html单页面，并且把打包后的js文件放进去，放置的路径就是output中的路径，这里的路径必须是绝对路径

   • clean-webpack-plugin模块，主要作用是在生成dist时，自动清除上一次的dist文件夹，在npm中安装后直接引入，在plugins中添加实例化对象new CleanWebpackPlugin,即可使用。需要注意的是此模块在webpack官方文档中的引入方法有误，正确写法为

     // 自动删除dist
     const { CleanWebpackPlugin } = require('clean-webpack-plugin')
     

   • 热更新模块，由于webpack自带了相当好用的热更新模块，我们直接引入webpack模块，在plugins实例化即可使用

     // 用于热更新
     new webpack.NamedModulesPlugin(),
     new webpack.HotModuleReplacementPlugin(),
     

   • 安装开发环境服务webpack-dev-server模块，其作用在于启动一个开发环境。在npm中下载后，在module.exports中创建devServer。注意需要全局安装

     devServer: {
         port: '8090', // 端口号
         open: true, // 运行后自动打开浏览器，false反之
         contentBase: path.resolve(__dirname, 'public'),
     
         // 开启热更新
         hot: true,
     }
     

   • 安装css和scss相关依赖插件，由于在webpack中使用scss文件需要编译，所以需要安装以下三个loader，分别是style-loader、css-loader 、sass-loader以及一个sass依赖node-sass。在命令行输入npm install --save-dev css-loader style-loader sass-loader node-sass 即可，其中node-sass极易下载失败，需要多次下载，以致成功安装。最后在module中添加rules，三个loader的书写顺序必须如下，否则会出错

     module: {
         rules: [
             {
                 test: /\.(scss|css)$/,
                 // 顺序必须为style、css、sass
                 // 1.将 JS 字符串生成为 style 节点
                 // 2.将 CSS 转化成 CommonJS 模块
                 // 3.将 Sass 编译成 CSS
                 use: ['style-loader', 'css-loader', 'sass-loader']
             }
         ]
     },
     

   • 安装babel编译，因为在往后的使用中可能会大量使用到es6语法，所以安装babel是必要的。这里我们需要安装的是babel-loader和@babel/core，下载也是使用npm命令。npm install babel-loader -D和
     npm install @babel/core -D，安装完成后需要在webpack.config.js文件module中的rules添加如下代码

     {
     	test:/\.js$/, 
     	use:['babel-loader'], 
     	exclude: /node_modules/ // 表示忽略此目录的检测
     }
     

   • 为了养成良好的编程习惯和书写规范，便于协同开发。我们还需要安装可以自定义规则的eslint插件。有两个插件需要安装，分别是eslint-loader和eslint，命令行为npm install eslint-loader -D和npm install eslint -D，也需要在上一步骤中的rules中创建对象

     {
     	test:/\.js$/, 
     	use:['eslint-loader'], 
     	exclude: /node_modules/,  // 表示忽略此目录的检测
     	enforce:'pre' // pre为前置检测，post为后置检测
     }
     

     同时还需要手动在项目根目录新建一个.eslintrc.json配置文件

     {
         "parserOptions": {
             "ecmaVersion": 6,
             "sourceType": "module",
             "ecmaFeatures": {
                 "jsx": true
             }
         },
         "rules": {// 用于规定项目中的报错或警告的规则
     		"semi": "error" // 分号检测
     		"no-console": 2 // 0 1 2 警告层级：忽略 警告 报错 
         }
     }
     

     然后在配置文件webpack.config.js中devServer可以添加overlay：true，它可以在你的文件报错时，在网页中添加一个无法操作的遮盖层以提示错误，像是这样
     
     tip：项目在使用eslint第一次运行就是出错的情况下，遮罩层容易出不来。如果出现此类问题，应先将不报错、正确的代码运行一遍，成功后。在修改至报错代码，遮罩层出来之后，以后就能正常使用了

2. 此时，你已经可以启动项目了，在命令行中输入webpack即可运行

3. 整个项目的文件结构如下
   

end