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命令就可以就可以默認找到

　　雖然可以使用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下的，而是直接運行起來即可。

webpack查缺補漏