webpack3+react+webstorm建立專案

阿新 • • 發佈：2019-01-31

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": []
         }