WebPack
您现在的位置是:博客主页 > Web教程 > WebPack

Webpack4.3概念输出(output)

By 点想博主 on WebPack Time 2019-05-08 from:互联网 611人已围观
简介:    输出(output) 查看原文|编辑此页 配置 output 选项可以控制 webpack 如何向硬盘写入编译文件。注意,即使可以存在多个入口起点,但只指定一个输出配置。 用法(Usage) 在 webpack 中配置 output 属性的最低要求是,将它的值设置为一个对象,包括以下两点: filename 用于输出文件的文件名。 目标输出目录

输出(output)

查看原文|编辑此页

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

用法(Usage)

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

filename 用于输出文件的文件名。

目标输出目录 path 的绝对路径。

webpack.config.js

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

module.exports = config;

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

在webpack4.30.0版本下,上面配置文件,/home/proj/public/assets路径编译时无法生成路径,而且无法生成bundle.js文件,所以更新成下面,目录下默认新增了src/index.js(空文件),新增之后才不在报错。

const config = {
	output: {
		path:__dirname+'/home/proj/public/assets',
		filename:'bundle.js'
	}
};

module.exports = config;

多个入口起点

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

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

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

webpack.config.js

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

module.exports = config;

配置后的目录以及编译后的目录结构。

高级进阶

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

output: {
       path: "/home/proj/cdn/assets/[hash]",
       publicPath: "http://cdn.example.com/assets/[hash]/"
}

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

__webpack_public_path__ = myRuntimePublicPath
// 剩余的应用程序入口
文件尺寸 6.298 MB
下载次数 0( 次 )
本地下载 本地下载
百度密钥 无需密钥
百度网盘 百度下载
相关文章
文章评论

( 0 )