如何使用 webpack 在项目中设置多个文件输入和输出?

Posted

技术标签:

【中文标题】如何使用 webpack 在项目中设置多个文件输入和输出?【英文标题】:How to set multiple file entry and output in project with webpack? 【发布时间】:2015-11-01 15:58:55 【问题描述】:

如何使用 webpack 在项目中设置多个文件输入/输出?

我关注http://webpack.github.io/docs/tutorials/getting-started/如果一个条目/输出中只有一个文件,则成功编译...

目录

app
webpack.config.js
./assets
././javascripts/Administrator/Article/Create/Base.js
././javascripts/Administrator/Article/Edit/Base.js
././javascripts/Account/Index/Base.js
././javascripts/Contact/Index/Base.js
...

这样怎么输出?

././javascripts/Administrator/Article/Create/bundle.js
././javascripts/Administrator/Article/Edit/bundle.js
././javascripts/Account/Index/bundle.js
././javascripts/Contact/Index/bundle.js

webpack.config.js

module.exports = 
  entry: 
    'AdministratorArticleCreate':['./assets/javascripts/Administrator/Article/Create/Base.js']
  ,
  output: 
    path: 
  

    // if only one file
    // entry: "./assets/javascripts/Administrator/Article/Create/Base.js",
    // output: 
    //     // path: __dirname,
    //     path: "./assets/javascripts/Administrator/Article/Create/",
    //     filename: "bundle.js"
    // 
;

【问题讨论】:

我也遇到了这个问题,找不到解决办法。如果有人可以分享解决方案会很棒 【参考方案1】:

对于许多入口点,使用数组作为entry 属性的值:

entry: 
  app: ['./app/main.js', '.lib/index.js'],
  vendors: ['react']

appvendors 是数组,因此您可以根据需要在其中放置任意数量的文件路径。

对于输出案例:

output: 
  path: staticPath,
  filename: '[name].js'

[name] 取自 entry 属性,所以如果我们有 appvendors 作为属性,我们会得到 2 个输出文件 - app.jsvendors.js

Documentation link

【讨论】:

你想要什么不同的文件扩展名,例如,输出app.jsstyles.css? 是否可以有不同的输出文件夹? 我该如何做类似entry: ./app/js/*.js 的事情?一个个放文件名太痛苦了。 编译时的含义。 'main.js' 可以从 index.js 请求模块? 不起作用!条目: app: settings.themeLocation + "js/vote-scripts.js" ,输出: path: path.resolve(__dirname, settings.themeLocation + "js"),文件名:"[name].js" 【参考方案2】:

如果要输出到多个目录,可以使用路径作为入口名。例如,如果你想要这个目录结构:

apps
├── dir1
│   └── js
│       ├── main.js [entry 1]
│       └── bundle.js [output 1]
└── dir2
    ├── index.js [entry 2]
    └── foo.js [output 2]

然后在你的 module.exports 中试试这个:


  entry: 
    'dir1/js/bundle': path.resolve(__dirname, '/apps/dir1/js/main.js'),
    'dir2/foo' : path.resolve(__dirname, '/apps/dir2/index.js')
  ,
  output: 
    path: path.resolve(__dirname, '/apps'),
    filename: '[name].js'
  ,
  ...

【讨论】:

brilliant -- 将路径元素放入入口点的“名称”中... 感谢您提供其工作原理的可视化图表。 除了目录名重复之外很有用 有点骇人听闻和(可能)非官方的,但很好。一个非常好的。【参考方案3】:

真正为我解决的问题是:

entry:  
    app : __dirname + "/app/views/app/app.js",
    admin : __dirname + "/app/views/admin/admin.js"


output: 
    path: __dirname + "/public",
    filename: "[name].js"
,

【讨论】:

我唯一要注意的是,它使用密钥替换“[name]”,因此密钥中不能包含无效字符(例如 local-admin不会是有效的),但这是相当小的。【参考方案4】:

您可以使用glob sync 模式检测多个条目并生成单独的输出文件。

把这个放到你的webpack.config.js(没有...

const glob = require("glob");
...
module.exports = (env, options) => (
  ...
  entry: glob.sync("./javascripts/**/*.js").reduce((acc, item) => 
    const path = item.split("/");
    path.pop();
    const name = path.join('/');
    acc[name] = item;
    return acc;
  , ),
  output: 
    filename: "[name]/bundle.js",
    path: path.resolve(__dirname, "")
  ,
  ...
);

这个“应该”给你想要的输出。

【讨论】:

【参考方案5】:

如果您想同时获得foo.cssbar.js 的输出文件怎么办?上面的答案似乎无法处理。

理智的方法是使用multi-compiler。一个输入文件一个配置对象一个输出文件。来自这个answer。

【讨论】:

【参考方案6】:

这个 webpack 插件web-webpack-plugin 可以通过示例方式解决它。

AutoWebPlugin可以在一个目录中找到所有页面入口,然后为每个页面自动配置一个WebPlugin输出一个html文件,你可以如下使用:

webpack 配置

module.exports = 
    plugins: [
        new AutoWebPlugin(
            // the directory hold all pages
            './src/', 
            
            // the template file path used by all pages
            template: './src/template.html',
            // javascript main file for current page,if it is null will use index.js in current page directory as main file
            entity: null,
            // extract common chunk for all pages and then put it into a file named common,if it is null then not do extract action
            // achieve by CommonsChunkPlugin
            commonsChunk: 'common',
            // pre append to all page's entry
            preEntrys:['./path/to/file1.js'],
            // post append to all page's entry
            postEntrys:['./path/to/file2.js'],
        ),
    ]
;

src 目录

── src
│   ├── home
│   │   └── index.js
│   ├── ie_polyfill.js
│   ├── login
│   │   └── index.js
│   ├── polyfill.js
│   ├── signup
│   │   └── index.js
│   └── template.html

输出目录

├── dist
│   ├── common.js
│   ├── home.html
│   ├── home.js
│   ├── ie_polyfill.js
│   ├── login.html
│   ├── login.js
│   ├── polyfill.js
│   ├── signup.html
│   └── signup.js

AutoWebPlugin./src/中找到所有页面home login signup目录,对于这三个页面home login signup将使用index.js作为主文件并输出三个html文件home.html login.html signup.html`

见doc:auto detect html entry

【讨论】:

【参考方案7】:

这个问题已经有 2 年历史了,所以我认为作者几乎肯定已经从这个问题上移开了,但是对于最近登陆这里的任何人,我有一个非常相似的需求,并且能够编写我自己的插件以允许动态输出路径/来自已知和/或未知入口点的名称。

My problem and thought process for the solution can be found here.

And the Node package itself here.

【讨论】:

【参考方案8】:

对于我的用例,我实际上需要根据环境使用不同的模板。为此,我传入了 NODE_ENV 变量

module.exports = (env, argv) => 
  const ENVIRONMENT = env.NODE_ENV;
  let INDEX_HTML = 'index.html';
  if (ENVIRONMENT === 'staging') 
    INDEX_HTML = 'index-stg.html';
  

然后:

if (NODE_ENV === 'staging') 
   INDEX_HTML = 'index-stg.html';

在输出中:

output: 
      path: process.cwd() + '/build',
      filename: `[name].js`,
      chunkFilename: `[$HASH_MODE].[name].js`
    ,

插件:

new HtmlWebpackPlugin(
        inject: true,
        template: `app/$INDEX_HTML`,
      ),

【讨论】:

【参考方案9】:

使用以下内容,我能够让 webpack 搜索 typescript 和 sass 文件。

...
entry: glob
  .sync("./src/sass,js/**/*.ts,scss")
  .reduce(function (obj, el) 
    obj[path.parse(el).name] = el;
    return obj;
  , ),
...

【讨论】:

以上是关于如何使用 webpack 在项目中设置多个文件输入和输出?的主要内容,如果未能解决你的问题,请参考以下文章

Webpack 4 代理(如何在 webpack 4 中设置代理 url)

如何在 Gitlab CI 中设置环境变量并使其在本地可测试

如何在实时服务器中设置多个站点?

如何在 vue-cli 中设置生产构建路径?

如何在具有多个电源的单个模块项目中设置 sbt-native-packager

在 Karma 中设置 NODE_ENV 以运行 webpack 的正确方法是啥?