优化 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