webpack入门webpack的api

Posted 2020-06-09

终于到了webpack api这一篇，我都等不及了0.0;

webpack is fed a configuration object. Depending on your usage of webpack there are two ways to pass this configuration object:

webpack提供一个配置对象，取决于你咋用webpack，这有两种办法pass这个配置对象。

CLI

If you use the CLI it will read a file webpack.config.js (or the file passed by the --config option). This file should export the configuration object:

如果你用CLI，它只认webpack.config.js这个文件，（或者弄一个文件加一个--config的mark），这个文件就导出这个配置对象。

module.exports = {
    // configuration
};

node.js API

If you use the node.js API you need to pass the configuration object as parameter: 用node，，需要将配置对象用参数传递进去，如下：

webpack({
    // configuration
}, callback);

multiple configurations

In both cases you can also use an array of configurations, which are processed in parallel. They share filesystem cache and watchers so this is more efficent than calling webpack multiple times.      在这两种情况下，并行处理，你可以用个配置数组，他们共享文件系统缓存和watchers，比多次webpack调用更有效

CONFIGURATION OBJECT CONTENT

Hint: Keep in mind that you don’t need to write pure JSON into the configuration. Use any javascript you want. It’s just a node.js module…

提示：记住，不用在配置里写纯json文件，随便用js，它就是一个nodejs的模块

Very simple configuration object example:

{
    context: __dirname + "/app",
    entry: "./entry",
    output: {
        path: __dirname + "/dist",
        filename: "bundle.js"
    }
} 

context

The base directory (absolute path!) for resolving the entry option. If output.pathinfo is set, the included pathinfo is shortened to this directory.

基础目录（绝对路径）用于解决entry这个选项，如果output.pathinfo设置了，就包含了缩短过的目录；（相当于公共目录，下面所有的目录都在这个公共目录下面）

Default: process.cwd()

entry

The entry point for the bundle.  打包文件的入口

If you pass a string: The string is resolved to a module which is loaded upon startup.      如果传入一个字符串，这个字符串就会被解析为启动时加载的模块。

If you pass an array: All modules are loaded upon startup. The last one is exported.  如果传入个数组，所有模块都是启动时加载，导出最后一个

entry: ["./entry1", "./entry2"]

If you pass an object: Multiple entry bundles are created. The key is the chunk name. The value can be a string or an array.

 如果传入一个对象，就会创建多个输入包文件，对象键值就chunk的name，值可以是字符串或者是数组。

{
    entry: {
        page1: "./page1",
        page2: ["./entry1", "./entry2"]
    },
    output: {
        // Make sure to use [name] or [id] in output.filename
        //  when using multiple entry points
        filename: "[name].bundle.js",
        chunkFilename: "[id].bundle.js"
    }
}

上面传了一个对象，page1和page2会生成两个打包文件，名字就是page1.bundle.js和page2.bundle.js，入口文件是3个,page1模块，entry1和entry2模块。

output

Options affecting the output of the compilation. output options tell Webpack how to write the compiled files to disk. Note, that while there can be multiple entry points, only one output configuration is specified.

If you use any hashing ([hash] or [chunkhash]) make sure to have a consistent ordering of modules. Use the OccurenceOrderPluginor recordsPath.

 output是影响编译输出的选项。output选项告诉webpack怎么把编译文件写入磁盘。注意，虽然可以有很多输入口，但是只有一个输出配置

如果你用了很多hashing，确保有一个一致的模块顺序。用OccurenceOrderPlugin插件或者 recordsPath

output.filename

Specifies the name of each output file on disk. You must not specify an absolute path here! The output.path option determines the location on disk the files are written to, filename is used solely for naming the individual files.

指定每个输出文件的名字，你必须要指定一个绝对路径，output.path 选项决定了文件在磁盘上被写入的路径，filename仅被用于命名单个文件

single entry

未完持续……