叉烧店并不卖叉烧

webpack出口

webpack TTT 16℃ 0评论

参考 参考2

出口【output】

output属性告诉webpack在哪里输出它所创建地bundles,以及如何命名这些文件,主输出文件默认为./dist/main.js,其他生成文件的默认输出目录是./dist

我们可以通过在配置中指定一个output字段,来配置这些处理过程:

webpack.config.js

const path = require('path');

module.exports = {
    entry: './path/to/my/entry/file.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'my-first-webpack.bundle.js'
    }
};

在上面的示例中,我们通过output.filenameoutput.path属性,来告诉webpack bundle的名称,以及我们想要bundle生成(emit)到哪里。可能我们想要了解在代码最上面导入的path模块是什么,它是一个Node.js核心模块,用于操作文件路劲

output属性还有更多可配置的特性,可以通过阅读输出章节来了解更多关于它的概念

输出【output】

配置output选项可以控制webpack如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,?但只指定一个输出配置?!

用法【Usage】

在webpack中配置output属性的最低要求是,将它的值设置为一个对象,包括以下两点:

  • filename用于输出文件的文件名
  • 目标输出目录path的绝对路径

webpack.config.js

module.exports = {
    output: {
        filename: 'bundle.js',
        path: '/home/proj/public/assets'
    }
};

此配置将一个单独的bundle.js文件输出到/home/proj/public/assets目录中

多个入口起点

如果配置创建了多个单独的“chunk”(例如,使用多个入口起点或使用像CommonsChunkPlugin这样的插件),则应该使用占位符(substitutions)来确保每个文件具有唯一的名称

module.exports = {
    entry: {
        app: './src/app.js',
        search: './src/search.js'
    },
    output: {
        filename: '[name].js',
        path: __dirname + '/dist'
    }
};

// 写入到硬盘:./dist/app.js, ./dist/search.js

高级进阶

以下是使用CDN和资源hash的复杂示例:

config.js

module.exports = {
  //...
  output: {
    path: '/home/proj/cdn/assets/[hash]',
    publicPath: 'http://cdn.example.com/assets/[hash]/'
  }
};

在编译时不知道最终输出文件的publicPath路径的情况下,publicPath可以留空,并且在入口起点运行文件时动态设置。如果我们在编译时不知道publicPath,你可以先忽略它,并且在入口起点设置__webpack_public_path__

__webpack_public_path__ = myRuntimePublicPath;

// 剩余的应用程序入口

转载请注明:叉烧店 » webpack出口

喜欢 (0)
发表我的评论
取消评论

CAPTCHA Image
Reload Image
表情

Hi,您需要填写昵称和邮箱!

  • 昵称 (必填)
  • 邮箱 (必填)
  • 网址