webpack查缺補漏

　　webpack是模塊化打包工具，經過webpack，可使得咱們更加方便地組織代碼、壓縮、轉譯等等。 可是學習webpack也須要必定的成本，這裏記錄使用webpack許久以來一些模糊的知識點，方便之後查閱。

　　https://webpack.js.org/configuration/ （該配置文件能夠幫助咱們快速理解實際項目中的配置屬性）

1. var path = require('path')，其中的path須要咱們安裝嗎? 

　　不須要。 使用了node環境以後，path模塊是node提供了的，因此不須要進行npm install path這樣的操做。 

 

2. webpack的好處有哪些 ?

　　開頭就說了，使用webpack能夠方便咱們組織代碼，好比一個項目依賴於某個庫，咱們能夠直接將這個庫的js放在html中，而後再在另外一處引入js文件，這個js使用了這個庫，可是他們卻沒有明顯的依賴關係，而且在項目稍大時，不只依賴關係很難控制，而且會引入不少文件，發送多個http請求。 可是使用了webpack以後，咱們就能夠從一個入口文件開始組織依賴關係，這樣的關係就很明確，而且最終能夠打包到一個js中，減小了http請求。

 

3. 必須在根目錄下添加一個webpack.config.js文件嗎？ 名字不能改變？ 位置不能改變？ 既然可使用CLI，爲何還要使用配置文件呢？ 

　　不是的。 通常，在根目錄下回有一個webpack.config.js，而後在CLI工具中使用weibpack命令就能夠就能夠默認找到根目錄下的webpack.config.js進行打包，而咱們也能夠起一個別的配置文件的名字，如my.config.js，只是這時咱們須要指定相應的參數，如 webpack --config my.config.js ，只是這時仍是默認根目錄。 好處在於這種方法對於大型項目，配置文件可能不僅一個，咱們須要自定義名稱。 

　　雖然可使用CLI完成相同的命令，可是每次你都須要輸入一大段命令。 而若是使用了配置文件， 就只須要webpack， 更多設置就由配置文件來提示了。

　　固然，另一種更爲方便和普遍使用的方法就是使用npm scripts，如npm run build，在package.json中的scripts中使用"build": "webpack"便可。

 

4. 在作項目時，咱們發如今配置webpack的過程當中，想要在jsx文件中引入圖片或者是css都不能成功，這是爲何？ 

　　由於webpack認爲這個項目中的全部文件都是模塊，都是他所關心的。 遺憾的是，webpack只認識js文件， 對於js的處理沒有問題，可是對於css文件、圖片、設置js衍生出的jsx文件都是不能識別的，若是但願正常引用這些文件，咱們必需要使用webpack四大核心概念（entry、output、plugins、loaders）中的loaders，即模塊加載器，好比對於通常的react項目，咱們須要保證的是jsx、css、less以及圖片的正常加載，配置文件以下所示：

module.exports = {
    entry: ["./src/index.js"],
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    },
    watch: true,
    module: {
        loaders: [
        {
            test: /\.jsx?$/,
            loader: 'babel-loader',
            exclude: /node_modules/,
            query: {
                presets: ['es2015', 'react']
            }
        },
        {
            test: /\.css$/,
            loader: 'style-loader!css-loader'
        },
        {
            test: /\.less$/,
            use: [{
                 loader: "style-loader" // creates style nodes from JS strings
             }, {
                 loader: "css-loader" // translates CSS into CommonJS
             }, {
                 loader: "less-loader" // compiles Less to CSS
             }]
        },
        {
            test: /\.(jpg|png|svg)$/,
            loader: 'url-loader'
        }
        ]
    }
}

即test屬性用於檢測文件類型，而loader屬性用於說明使用的加載器。

babel-loader用於加載jsx文件，css-loader用於尋找全部的css文件、style-loader用於嵌入css文件到html中，style-loader、css-loader、less-loader三者配合處理less文件，對於圖片文件也須要url-loader加載器才能完成模塊的加載。 

　　

5. 第四個問題中，咱們提到了loaders的做用，可是在官網上能夠發現loaders內容下的例子使用的倒是rules，那麼loaders和rules的區別是什麼呢？ 

　　在stackoverflow上，咱們能夠發現這個問題：https://stackoverflow.com/questions/43002099/rules-vs-loaders-in-webpack-whats-the-difference ，即loaders的使用大多在webpack1,而rules是用在webpack2中的，而且 loaders 在將來將會被廢棄。 

　　官網上的介紹以下：

const path = require('path');

const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

module.exports = config;

 

可是在使用這種方法時對於jsx的query、exclude會出現一些問題，目前還沒有解決。 由於使用webpack2和1有所不一樣，須要在stackoverflow進一步尋找答案。

 

6. loaders和plugins的區別是什麼？ 實例？ 

　　loaders的做用大可能是爲了解決單個文件的，將之轉化爲模塊，可是plugins是一個更爲強大、有力的針對打包的文件進行編譯等的工具，loaders的使用通常都是直接針對不一樣的文件使用不一樣的loader,可是plugins的使用是先經過require引入，而後在plugins中使用new建立實例才能完成的。  

 

 

7. 爲何有時候以爲引用的相對路徑沒有問題，可是在控制檯中看到的是404 not found？ 在webpack配置文件中output裏的path和publicPath的區別是什麼(node端如此)？

　　https://webpack.js.org/configuration/output/#output-publicpath

　　通常path都會結合內置的path模塊來使用，而publicPath不是的。path是說最終打包到的位置，而publicPath的做用是引用外部資源的位置。二者是徹底不一樣的。 其默認是「」。 好比在我以前作的vue項目中： 

  output: {
    path: config.build.assetsRoot,
    filename: '[name].js',
    publicPath: process.env.NODE_ENV === 'production'
      ? config.build.assetsPublicPath
      : config.dev.assetsPublicPath
  },

　　接着找到config中的，build中的以下：

    assetsPublicPath: '/bbg/wechat2/',

　　即咱們在服務器上使用資源，尤爲是使用node做爲本地服務器時，若是publicPath設置有問題，就沒法獲取資源。 

 

　　好比，咱們在使用node做爲服務器端的時候，在app.get()時返回一個html頁面，這個頁面中使用link引入了外部css文件或者使用script引入了外部js文件，這時先進行打包，而後再運行這個文件，那麼咱們就能夠發現報錯404， 這時，在node端添加下面的幾行代碼：

// serve pure static assets
var staticPath = path.posix.join('/', 'static')
app.use(staticPath, express.static('./static'))

　　即放在server端的純靜態文件，這樣，就不會報出404錯誤了。

 

8. 在使用react、webpack配置時，能夠發現咱們html的末尾添加了bundle.js（注意： 這是我提早就添加好的，而不是讓webpack自動添加的），那麼這個bundle.js因爲打包到了dist下而沒有到static下，因此在引用時還會出現404錯誤，這個應該怎麼解決呢？ 

　　解決方法一：最簡單的解決方法固然是直接將打包的文件打包到static下，而不是dist下，可是這樣的項目是難以理解的。 通過嘗試： 確實是可行的。 

　　解決方法二：即咱們只是但願在開發環境中使用（dev）， 而不是在生產環境中使用，其實和vue-cli生成的項目相似，咱們是沒有必要將bundle.js打包到dist下的，而是直接運行起來便可。