Webpack 筆記：用 url-loader 載入字體和圖片

研究了 Webpack 一段時間，決定將 Webpack 從 React 獨立出來啦！
自己則是在實務上剛好遇到 CSS 檔內有使用 url() ，結果 Webpack 就會說他不知道怎麼處理這些 jpg 、 png 、 ttf 等等，像這樣：



首先先用 npm 安裝 url-loader
npm install —save-dev url-loader

以及 html-loader
npm install —save-dev html-loader

再來則是修改一下我們的 Webpack 設定檔，新增新的 loader ， loader 其實就是告訴 Webpack 該如何看懂這些檔案的工具，例如：”babel-loader”就是用來處理 js 檔的 loader，而 style 、 css 、 sass 這些 loader 就是用來處理 CSS 或 SCSS 檔用的。

module: {
    loaders: [{
        loader: 'babel-loader',
        query: {
            presets: ['es2015']
        },
        test: /\.js?$/, //正規表示式，表示要處理的副檔名
        exclude: /(node_module)/ //忽略這個資料夾
    },{
        test: /\.woff?$|\.woff2?$|\.ttf$|\.eot$|\.svg$/,
        loader: 'url-loader?limit=1024&name=assets/fonts/[name].[ext]'
    }, {
        test: /\.jpg?$|\.jpeg?$|\.gif?$|\.png?$/,
        loader: 'url-loader?limit=1024&name=assets/images/[name].[ext]'
    }, {
        test: /\.html?$/,
        loader: 'html-loader'
    }]
}

loader 值會放入一串字串，這串字串的開頭會包含 loader 的名稱，接著就是一些參數，像是 name 就是指處理之後的名稱命名，當然可以放入一串路徑決定檔案之後放置的位置，limit=1024則表示， url-loader 只會處理大小小於1KB的檔案，如果超過將會改用 file-loader ，也就是說，如果使用了 url-loader 卻出現以下錯誤的話，請記得要另外安裝 file-loader 喔！
npm install --save-dev file-loader



到這邊算是解決了載入問題，但是此時要是跑起 dev-server 的話，我們網頁的控制台可能會像這樣十分難看，我們將檔案擺在不同的位置後，網頁會找不到原本的圖片和字體這些資源，解決方法也很簡單，但我目前還不知道為什麼，只要在 output 增加一個 publicPath 參數就可以解決了。



output: {
    path: PATHS.build,
    filename: 'assets/js/[name].js',
    publicPath: '/'
},