優化 Webpack build 生成目錄結構

問題

最近作了個稍微大點項目，npm run build 後幾百上千個文件直接放到一個目錄直鋪下來，bundle.js 都找不到了。

解決方法

首先把圖片放子目錄下

在 module.loaders 配置中圖片加載要使用 file-loader，在 name 參數的 [name] 前加目錄名。

{
     test: /\.(png|jpe?g|gif)$/,
     loader: "file?name=__images_build__/[name].[ext]"
}

其餘的字體等資源也能夠這樣優化。

再把 entry 生成的 bundle 放子目錄

看看 Webpack output config 各項的意思

• path 配置輸出目錄
• filename 配置輸出的文件名
• publicPath 配置最終線上使用的路徑，在 webpack plugin hook 中會輸出這一路徑

能夠利用的是 filename 一項 ，當要把生成的 js css 單獨放子目錄時，能夠在文件名前加目錄名。
好比如下修改生成的 js 放輸出目錄下的子目錄 __bundle_build__ 下。

thisConfig.output = { 
    filename: '__bundle_build__/[name].[hash].js', 
    path: './build', 
    publicPath: '/' 
}

生成的最終效果如：

webpack-build 
 ├── __bundle_build__ 
 │             ├── main.css 
 │             ├── mainA.js 
 │             └── mainB.js 
 ├── __images_build__
 │             ├── a.png 
 │             └── b.png     
 └── index.html

修改 filename 而不是 path 的緣由

咱們試一下在 path 下加子目錄 './build/__bundle_build__' 而不是改 filename。

thisConfig.output = { 
    filename: '[name].[hash].js', 
    path: './build/__bundle_build__', 
    publicPath: '/' 
}

看看結果：

webpack-build 
 └── __bundle_build__ 
             ├── main.css 
             ├── mainA.js 
             ├── mainB.js 
             ├── __images_build__ 
             │          ├── a.png 
             │          └── b.png     
             └── index.html

本文同步發佈在我博客：http://zaishanda.com/post/10