webpack3+react+webstorm创建项目

时间 2020-12-26 标签 webpack react node

1. 创建一个空白项目

2. 执行npm init –y，产生package.json文件

解释1：npm init用来初始化一个项目，初始化的过程中，会让我们逐步确认项目名称、版本、项目描述、主文件、关键字等信息，如果使用npm init –y，初始化过程会使用默认配置，不需要我们逐步确认而生成package.json文件。

3. webpack

3.1 执行npm install --save-dev [email protected]，引入webpack模块

解释1：webpack是一个打包工具，它做的事情是，分析你的项目结构，找到JavaScript模块以及其它的一些浏览器不能直接运行的拓展语言（Scss，TypeScript等），并将其打包为合适的格式以供浏览器使用。

来源：https://doc.webpack-china.org/

解释2：

npm install——安装模块包

npm install --save-dev——会在package.json的devDependencies属性下添加对应的模块包名

npm install --save-dev [email protected]——安装相应版本的模块包

3.2新建并编写webpack配置文件webpack.dev.config.js

    const path = require('path');
    module.exports = {
    /*入口*/
          entry: path.join(__dirname, 'src/index.js'),
          /*输出到dist文件夹，输出文件名字为bundle.js*/
          output: {
             path: path.join(__dirname, './dist'),
             filename: 'bundle.js'
          } 
    };

解释：webpack将入口文件index.js进行编译，并将编译之后的文件命名为bundle.js放在dist目录下

3.3 新建入口文件src/index.js，并添加内容

解释：该入口文件index.js将id为app的DOM节点的页面内容填充为“webpack works”

3.4执行命令 webpack --config webpack.dev.config.js

我们可以看到生成了dist文件夹和bundle.js

3.5 在dist文件夹下新建index.html并填写内容

        <!doctype html>
         <html lang="en">
             <head>
                  <meta charset="UTF-8">
                  <title>Document</title>
             </head>
             <body>
                  <div id="app"></div>
                  <script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
             </body>
         </html>

解释：该index.html文件中包含了一个id为app的div DOM节点，并引入编译之后的bundle.js文件

3.6 查看运行结果

直接在浏览器中打开index.html，即可看到运行结果

解释：这种情况下，类似于在index.html中直接引用index.js

4. babel

4.1 执行npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0，引入babel相关模块包

解释1：babel是将ES6或ES7转化成ES5的工具，因为有些浏览器还未完全支持ES6或ES7的语法，所以需要使用babel将ES6或ES7转化成ES5，以便在浏览器上运行

解释2：

babel-preset-es2015：用于解析 ES6

babel-preset-react：用于解析 JSX

babel-preset-stage-0：用于解析 ES7 提案

解释3：es7不同阶段语法提案的转码规则模块（共有4个阶段），分别是stage-0，stage-1，stage-2，stage-3。stage-0的功能范围最广大，包含stage-1, stage-2以及stage-3的所有功能。详见https://www.vanadis.cn/2017/03/18/babel-stage-x/

4.2 新建并填写babel配置文件.babelrc

        {
              "presets": [
                   "es2015",
                   "react",
                   "stage-0"
              ],
              "plugins": []
         }

4.3 修改webpack.dev.config.js，增加babel-loader

4.4 修改src/index.js，在该文件中使用ES6的箭头函数

4.5 执行命令webpack --config webpack.dev.config.js

4.6 查看运行结果

babel将箭头函数编译成了ES5语法的普通函数

5. react

5.1 执行npm install --save react react-dom，安装react和react-dom模块包

5.2 修改 src/index.js使用react

5.3 执行打包命令webpack --config webpack.dev.config.js\

5.4 打开index.html 看效果

5.5 把Hello React放到组件里面，实现组件化

5.6 修改src/index.js，引用Hello组件

5.7 执行打包命令webpack --config webpack.dev.config.js

5.8 打开index.html 看效果