Webpack+React項目入門——入門及配置Webpack

一、入門Webpack

參考文章:《入門Webpack,看這篇就夠了》
耐心看完這篇非常有幫助

二、React+Webpack環境配置

參考文章:《webpack+react項目初體驗》
項目實戰:《webpack+react小項目》

三、webpack相關參數

1. entry參數

module.exports = {
    ...
    entry:__dirname + '/client/index',//打包入口文件
    ...
}
/*******
例如可以是react渲染到組件的根js。↓
/client/index.js
ReactDOM.render(<App />,document.getElementById('root')

webpack從這個文件入手,獲取層層的依賴包。index.js下的App.js,App.js下的....
__dirname:node.js中的一個全局變量,指向當前執行腳本所在的目錄
********/

2. output參數

var path = require('path');

module.exports = {
    ...
    output: {
        path:path.join(__dirname + '/client/dist'),  //打包后文件存放的位置
        filename:'bundle.js'    //打包后的文件名
    }
    ...
}

3. loaders參數

module.exports = {
    ...
    module :{
        //配置ES6語法、React的loader
        loaders : [{
            test :/(\.jsx|\.js)$/,
            exclude : /node_modules/,
            loader :'babel-loader',
            options:{
                presets:[
                    "env", "react" 
                ]
            }
        },
        //配置css-loader
        {
            test : /\.css$/,
            loader:'style-loader!css-loader'
        },
        //配置less-loader
        {
            test: /\.less/,
            loader: 'style-loader!css-loader!less-loader'
        },
        ]
    },
    ...
}

4. html-webpack-plugin

const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    ...
    //插件
    plugins: [
        ...
        //以該文件下的本地index.html作為模板,打包的時候自動生成服務器html並自動引入打包的js文件
        new HtmlWebpackPlugin({
            template: __dirname + "/client/views/index.html"
        }),
        ...
    ],
    ...
}

四、package.json相關參數

1. script

"scripts": {
    "start": "node ./bin/www",  //用npm run start 指代 node ./bin/www命令 啟動服務
    "build": "webpack"  //用npm run build 指代 webpack  打包
},

2. dependencies和devDependencies

• 區別

  安裝

  npm install *** --save-dev //存進devDependencies 表示開發時依賴的插件（即不會打包至線上）
  npm install *** --save  //存進dependencies，表示生產環境運行時所需要的包
  

  歸屬模塊

  dependencies:jquery...(打包項目依賴的包,缺少會報錯)
  devDependencies:babel系列、webpack、React全家桶、less/sass-loader....(組件依賴一些框架或者比較大的包)
  

• 代碼

"dependencies": {
    "cookie-parser": "~1.4.3",
    "debug": "~2.6.9",
    "ejs": "^2.6.1",
    "express": "~4.16.0",
    "http-errors": "~1.6.2",
    "jade": "~1.11.0",
    "morgan": "~1.9.0"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "babel-preset-react": "^6.24.1",
    "css-loader": "^1.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less-loader": "^4.1.0",
    "react": "^16.4.2",
    "react-dom": "^16.4.2",
    "react-redux": "^5.0.7",
    "react-router-dom": "^4.3.1",
    "style-loader": "^0.22.1",
    "webpack": "^3.0.0",
    "webpack-cli": "^3.1.0",
    "webpack-dev-server": "^3.1.5"
  }

五、webpack增加熱更新(實時更新)

1. 安裝webpack-dev-server

npm install webpack-dev-server --save-dev

注意:如webpack-dev-server版本問題導致一個錯誤:
Error: invalid "instanceof" keyword value Promise
可安裝該版本:npm install webpack-dev-server@2.9.7 --save-dev

2. 配置webpack.config.js

//webpack.config.js
module.exports = {
    ...
    //配置熱更新
    devServer: {
        historyApiFallback: true,//不跳轉.
        hot: true,  //是否啟用模塊熱替換功能
        inline: true,//實時更新
    },
    ...
}

相關概念:

devServer.historyApiFallback：瀏覽器端的JavaScript代碼會從URL里解析出當前的狀態，顯示對應的界面。

devServer.inline：配置是否自動注入這個代理客戶端到將運行在頁面的Chunk里面，默認是會自動注入。DevServer會根據你是否開啟inline來調整它的自動刷新策略(刷新頁面方式不一樣)

1 如果開啟inline，DevServer會在構建完變化后的代碼時通過代理客戶端控制網頁刷新。
2 如果關閉inline，DevServer將無法直接控制要開發的網頁。這時它會通過iframe的方式去運行要開發的網頁，當構建完變化后的代碼通過刷新iframe來實現實時預覽。

3. 配置package.json

{
    ...
    "scripts": {
        "start": "node ./bin/www",
        "build": "webpack-dev-server --hot --inline"//將webpack更換成webpack-dev-server --hot --inline
      },
    ...

終端輸入npm run build。訪問相應端口即可實現熱更新！

六、配置過程中遇到的問題

1. Webpack版本問題

終端輸入:npm run build

error1:
Invalid configuration object. Webpack has been initialised using a configuration object that does not match the API schema.- configuration.module has an unknown property 'loaders'. These properties are valid:object { exprContextCritical?, exprContextRecursive?, exprContextRegExp?, exprContextRequest?, noParse?, rules?, defaultRules?, unknownContextCritical?, unknownContextRecursive?, unknownContextRegExp?, unknownContextRequest?, unsafeCache?, wrappedContextCritical?, wrappedContextRecursive?, wrappedContextRegExp?, strictExportPresence?, strictThisContextOnImports? }
-> Options affecting the normal modules (NormalModuleFactory).

原因:webpack版本問題,無法解析'loaders'

解決:安裝webpack的其他版本:

npm install webpack@3.0.0 --save-dev
或者
npm install webpack@2.1.0-beta.22 --save-dev

error2:
Module build failed: TypeError: fileSystem.statSync is not a function

原因:webpack版本不一致導致
解決:

npm install webpack@3.0.0 --save-dev

2. 模塊安裝問題

error1:
Module build failed: Error: Couldn't find preset "env" relative to directory

原因:配置的env需要babel-preset-env模塊
解決:

npm install babel-preset-env --save-dev

error2:
Module build failed: Error: Illegal import declation

原因:使用babel解析es6失敗
解決:

npm install babel-preset-es2015 --save-dev

3. 其他
error:
React+Webpack,打包成功后,node啟動服務.無法訪問編譯后的文件。
打包后的index.html可以訪問,但是bundle.js無法訪問.本地直接打開可正常引入index.html和bundle.js.但開啟服務訪問,無法成功獲得js.

原因:node配置靜態文件目錄指向錯誤. html文件引入目錄配置正確，但js等靜態文件引入目錄配置錯誤

解決:

//引入html文件的目錄指向
app.engine('html', ejs.renderFile);
app.set('views', path.join(__dirname, './client/dist'));    //目錄
app.set('view engine', 'html');

//引入css、js、img....等靜態文件目錄指向
app.use(express.static(path.join(__dirname, './client/dist')));