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

1、入門Webpack

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

2、React+Webpack環境配置

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

3、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"
        }),
        ...
    ],
    ...
}

4、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"
  }

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。訪問相應端口便可實現熱更新！

6、配置過程當中遇到的問題

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')));