Webpack4入门系列(一)

核心概念

webpack是现代JavaScript应用的静态打包工具。当webpack处理应用时，它内部会生成一个映射你项目须要的每一个模块的依赖图，并生成一个或多个包。

自从版本4.0.0后，webpack不须要配置文件就能打包你的项目，然而若是有须要，它也是极易配置的。

要开始使用你只须要理解它的核心概念：

• Entry
• Output
• Loaders
• Plugins
• Mode
• Browser Compatibility

这篇文档旨在提供一个这些概念的全局预览，也会提供跟概念详情相关的使用示例。

Entry

入口用来指示webpack从哪一个模块开始生成它的内部依赖图。webpack将会分析出入口会依赖哪些其余的模块和库（直接或间接）。

默认状况下值为./src/index.js，但你能够经过配置webpack配置文件中的entry属性来设置一个不一样的值（或多个入口）。

webpack.config.js

module.exports = {
  entry: './path/to/my/entry/file.js'
}
复制代码

Output

output属性告诉webpack将打包出的文件放置在哪里以及怎样命名这些文件。生成的主文件默认是./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.filename和out.path属性告诉webpack咱们的包名和咱们要将它放置的地方。你可能在想顶部导入的path模块是作什么用的，它是一个核心Node.js模块，用来操做文件路径。

Loaders

不借助其余东西，webpack只能理解JavaScript和JSON文件，Loaders容许webpack处理其余类型的文件，并把他们转换成能被你的应用使用的合法模块，并添加到依赖图中。

在较高层次上看，在配置文件中loaders有两个属性：

• test属性指定哪一个或哪些文件须要被转换。
• use属性指定使用哪一个loader来转换。

webpack.config.js

const path = require('path');

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

上面的配置为一个单独的模块定义了一个rules属性，并有两个必要属性：test和use。这告诉webpack如下内容:

"嘿，webpack编译器，当你遇到在require()/import声明中有以'.txt'结尾的文件路径时，在将它加入到bundle中以前先使用raw-loader来转化一下。"

Plugins

loaders能够用来转换一个特定类型的模块，而plugins能够用来作更加普遍的任务，好比包优化，资源管理和环境变量的注入。

要使用plugin，你须要require()它并将它加入到plugins数组中。大多数插件均可以使用options来自定义。由于你须要在配置文件的不一样地方使用插件屡次，因此你须要经过new操做符来构造一个实例。

webpack.config.js

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文件，并将你全部生成的包文件都自动注入进去。

在你的webpack文件中使用plugins是很是直接的，然而也有不少须要更多探索的使用实例。能够在这里查看。

Mode

将mode参数设置为development,production或none, 就能够开启针对各个环境内置的优化。默认值为production。

module.exports = {
  mode: 'production'
};
复制代码

Browser Compatibility

webpack支持全部兼容ES5的浏览器(IE8及如下版本不支持)。webpack须要Promise来支持import()和require.ensure()。若是你须要支持更老的浏览器，你须要在使用这些表达式以前加载一个polyfill。