Webpack4入门系列(一)-CSDN博客

核心概念

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。