webpack文档翻译_001

2019独角兽企业重金招聘Python工程师标准>>>

概念

webpack是一个为现代JavaScript应用的打包工具(a static module bundler)。

当webpack处理应用时，在其内部，会生成一个依赖图(dependency graph)，这个依赖图可以映射到项目里的每一个包，最终生成一个或者多个bundle。

从4.0版本开始，webpack不再需要配置文件，虽然如此，webpack还是可以很好的适应你的需求。 webpack有以下几个核心概念

• Entry
• Output
• Loaders
• Plugins

Entry

entry point指定webpack用哪个module(模块)开始构建其内部依赖图，webpack会计算出entry point直接或者间接依赖的其他module和library。

Entry的默认值是./src/index.js，但是你可以通过配置entyry属性来指定一个不同的(或者多个entry points)。

module.exports = {
  entry: './path/to/my/entry/file.js'
};

Output

output属性告诉webpack打包出来的bundles放在哪里，如何命名这些文件。默认主输出文件时是./dist/main.js，./dist则放置生成的其他文件。

这些也都可以通过webpack的配置指定不同的值

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.filename和output.path这两个属性，告诉webpack打包文件名字和输出目录。

至于在顶部引入的path模块，这是Node.js的一个核心模块，用于操作文件路径。

Loaders

webpack很蠢，只能解析JavaScript文件。Loader允许webpack处理其他类型的文件，并把他们转化成你应用中的可用的modules，然后加入到内部的依赖图。

在webpack配置中，Loaders有两个属性:test和use

• test指定哪些文件需要转化
• use指定在转化时使用哪个loader

const path = require('path');

module.exports = {
  output: {
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  }
};

上述配置为一个模块定义了一个rules属性，这会告诉wepack的编译器:

你好，webpack编译器，当你遇到require或者import了一个.txt类型的文件时，在把他加入到bundle之前，请使用row-loader转化这个文件

Plugins

Loaders使用来转化特定类型的文件，Plugins则被用来做一些更大范围的task(任务)，例如bundle的优化，assets的管理，注入环境变量等。

要使用一个plugin，你需要require()并且把他加入plugins数组中。

大多数Plugins是可以配置的。你可以多次使用同一个插件做不同的事情，只需要通过new操作符，创建多个不同的实例即可。

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins

module.exports = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};

上面的例子中，html-webpack-plugin生成一个html文件，并自动注入生成的bundles

Mode

设置Mode参数为development、production、none，可以启用webpack内部对于每个环境的优化。默认值是production

module.exports = {
  mode: 'production'
};

Translate from https://webpack.js.org/concepts/
Author: Zhuguannan

转载于:https://my.oschina.net/dennis1991/blog/1859599