webapck 一个文件打包到2个文件夹 怎么配置呢

JesseLuo
  • 1.8k

就是 output 两个出口

回复
阅读 2.2k
2 个回答
lifesimple
  • 816

楼上说的多个入口打包到一个文件夹下的就不赘述了,如果楼主想要分别打包到不同的文件夹下的话,有个hack的做法就是把入口名称加上路径。

module.exports = {
 entry: {
  "somePage": "./scripts/someDir/somePage.js",
  "someSubDir/anotherPage": "./scripts/someDir/someSubDir/anotherPage.js"
 },
 output: {
   path: path.resolve(__dirname, 'out/someDir'),
   filename: '[name].js'
 },
 // Etc.
}


参考How to create multiple output paths in Webpack config

出口只有一个,webpack打包的是js,当然也可以打包其他的css、png等文件,不过要用其他的插件来做。
举例说明:

output: {
    path      : path.resolve(__dirname, 'dist'),
    filename  : envDevelopment ? 'js/[name].js' : "js/[name].[chunkhash:5].js
}

这段代码会把所有打包后的js放在./dist/js文件夹下面。

    module : {
        rules: [
            {
                test    : /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                loader  : 'url-loader',
                options : {
                    limit: 10000,
                    outputPath: "images"
                }
            }
        ]
    }

这样的url-loader会把所有匹配到的图片打包在./dist/image下面。
例如css、fonts文件等可能要用到plugins,道理是相同的。

宣传栏