webpack4+react脚手架（一）

非原创，只是根据代码，重复做一遍，记录自己的知识点。推荐原博地址：https://github.com/vortesnail/blog/issues/4

一、webpack安装

1、初始化命令

【npm init -y】: 该命令会生成一个package.json文件，是配置文件。这个文件定义了项目需要的模块、项目配置信息（如名称、版本）。

【npm install】: 根据配置文件安装所需要的模块，配置项目需要的运行环境和开发环境。该命令会生成package-lock.json文件。

2、安装webpack

(1)【npm install --save-dev webpack webpack-cli】：安装webpack-cli。因为使用webpack 4+ 版本，必须要安装webpack-cli。安装完成后，会发现package.json中多了一个属性devDependencies。因为 --save-dev表示的是开发时的依赖， --save 表示的时运行时的依赖。接下来的依赖都要用 --save。

(2)config文件

在根目录下创建一个config文件夹，用来存放配置文件。然后在这个文件夹里面再创建一个名为webpack.common.config.js的文件，用于存放配置文件。

【webpack.common.config.js文件】：该文件用来配置出水口和入水口的文件地址。

const path = require('path')
 module.exports = {
     entry: {
         app: './src/app.js'
     },
     output: {
         filename: 'js/bundle.js',
         path: path.resolve(__dirname, '../dist')
     }
 }

（3）添加start指令

在package.json文件里，为script属性添加start指令。指令标注的是配置文件的路径。

【指令】：webpack --config ./config/webpack.common.config.js

（4）在控制台进行打包

【npm run start】: 在控制台输入命令，打包后生成dist/js/bundle.js文件。

二、webpack-merge的使用

使用这个工具的原因：生产环境和测试环境用一套环境就行，为了不写两遍，所以要安装webpack-merge

1、安装

【npm install --save-dev webpack-merge】: 安装webpack-merge，放在测试环境下。

2、config文件夹下建立测试配置文件和生产配置文件

【webpack.prod.config.js】: 生产配置文件，存放生产环境下的配置。

【webpack.dev.config.js】: 开发配置文件，存放运行环境下的配置。

3、webpack.prod.config.js文件进行配置

利用webpack-merge工具，将common与prod进行merge

const merge = require('webpack-merge')
const common = require('./webpack.common.config')

module.exports = merge(common, {
    mode: 'production'
})

4、app.js建立连接

在app.js文件中找到锚点，锚点id为root

5、public文件夹

创建public文件夹，在文件夹下创建index.html文件，在文件里创建id='root'的<div>

6、创建build指令，并在控制台运行

三、安装React

1、安装react

【npm install --save react react-dom 】:react是正式环境需要的

2、在src文件夹下面建立index.js文件，用来渲染根组件

3、在index.js文件下面，利用render函数进行根组件的渲染。

【reactDOM.render（组件名，id锚点】：渲染根组件

4、利用jsx语法在app.js文件中创建App组件

5、修改webpack.common.config.js文件的入水口

6、这个时候执行npm run build命令，会提示打包失败，这是因为webpack并识别不来哦jsx语法，所以需要使用loader对文件进行预处理。

四、使用babel7

1、安装插件

babel相关的模块有四个：

"@babel/core": 核心,

"@babel/preset-env": 转译es6语法,

"@babel/preset-react": 转译react的jsx语法,

"babel-loader": 使用babel和webpack来转译js文件,

2、根目录配置文件

只是安装babel是不起作用的，必须要有相对应的配置文件。该文件的位置一定是在根目录下。

文件名为”.babelrc“;

这个文件的配置项主要有两个，presets和plugins。配置参数的相关文档：

https://www.jianshu.com/p/3881c9ee4497

3、修改webpack.common.config.js，添加rules属性

4、控制台打包

【npm run build】：控制台输入命令，进行打包

报错：

1、npm没有安装成功

ERROR in ./src/index.js
Module not found: Error: Can't resolve 'react' in '/Users/wenxin/Desktop/myCode/webpack-react-scaffold/src'

这条错误的下面有一句：

This is probably not a problem with npm. There is likely additional logging output above.

但实际上，就是npm没有将react和reactDOM安装成功。在package.json文件中，缺少dependencies属性。重新安装后，报错消失。

2、.bablerc文件的配置问题

ERROR in ./src/index.js

Module build failed (from ./node_modules/babel-loader/lib/index.js):
Error: Cannot find module '@babel/preset-prest-env' from '/Users/wenxin/Desktop/myCode/webpack-react-scaffold'

找不到@babel/preset-preset-env这个模块的原因是.bablerc文件配置有问题，我是targets属性写成了“target”，少了个复数s

webpack4+react脚手架（一）

猜你喜欢