[译]webpack官网文档 ：概念 -- 1.介绍

原创翻译，转载请注明出处。

原文地址：https://webpack.js.org/concepts/

 

概念

Webkack是一个现代javascript程序的打包工具。它可以灵活配置，在开始使用之前，你应该理解它的4个核心概念。

作为学习webpack的一部分，这个文档的目的是给你一个这些概念的高层次的概述，同时会提供这些概念的详细用例连接。

 

入口（Entry）

Webpack会绘制一个你的应用的所有依赖的图。这个图的开发的地方被成为入口点（entry point）。这个入口点告诉webpack要从哪儿开始，并顺着依赖图来确定哪些东西需要打包。你可以把应用的入口点理解成上下文的根，或者开始应用的第一个文件。

在webpack的配置文件里，用entry属性来定义入口点。

最简单的例子如下：

 

webpack.config.js

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

 

根据应用的需要，有多个方法去声明entry属性。

 

输出（output）

把应用的所有资源都打包在一起之后，你需要告诉webpack要把你的应用包放在哪儿。Webpack的output属性告诉webpack怎样处理打包之后的代码。

 

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.filename和output.path两个属性来告诉webpack打包之后的包名和把它放在哪儿。

 

属性output还有很多可以配置的特性。

 

加载器（Loaders）

目标是把所有的项目资产都变成是webpack关联的，而不是浏览器关联的。（这并不意味着他们都必须被绑定到一起）webpack把每个文件（.css，.html，.scss，.jpg等等）都看成是模块。但是，webpack只懂得javascript语言。

在把依赖加入到依赖图的同时，webpack里的loaders会把相对应的文件转换成模块。

概要来说，它在你的webpack 配置文件里有两个目的：

1. 标识了哪些文件应该通过特定的loader来转换（test属性）
2. 转换这些文件，以便它能被加入到你的依赖图（并且最终到你的应用包里）（use属性）

 

webpack.config.js

const path = require('path');
 
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  }
};
 
module.exports = config;

 

上面的配置为一个module定义了rules属性，和它的两个必须属性：test，use。这个告诉webpack编译器以下信息：

“你好编译器，当你在require()/import声明里遇到了‘.js’或者‘.jsx’文件的时候，使用babel-loader来转换这些文件，让后把他们放到应用包里。”

当在webpack配置文件里定义rules的时候，要记住很重要的一点，他们要被定义在module.rules下，而不是rules。不管怎样，当你定义错误的时候webpack会通知你。

 

插件（Plugins）

因为Loaders只是执行转换每一个文件，plugins被经常用于（但不局限于）执行动作和对打包好的模块里的集合（compilations）或者块（chunks）定制各种功能。Webpack的plugin系统功能非常强大并且可以定制。

为了能使用plugin，你需要require()它，并且把它加入到plugins数组里。很多plugins可以通过参数进行定制。因为你可以在配置文件里多次使用它来实现不同的目的，所有需要用new来作成一个实例。

 

webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin'); //installed via npm
const webpack = require('webpack'); //to access built-in plugins
const path = require('path');
 
const config = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),
    filename: 'my-first-webpack.bundle.js'
  },
  module: {
    rules: [
      {test: /\.(js|jsx)$/, use: 'babel-loader'}
    ]
  },
  plugins: [
    new webpack.optimize.UglifyJsPlugin(),
    new HtmlWebpackPlugin({template: './src/index.html'})
  ]
};
 
module.exports = config;

 

webpack提供了很多可以马上使用的plugins。

在你的webpack配置文件里使用plugins是非常简单的，当然有一些用例需要进行更深的探讨。

 

-- End --