Webpack - 入门

概念

Webpack是什么？
Webpack是一个JS应用程序的静态模块打包器，它会构建一个依赖图(depandency graph)，包含应用程序需要的每个模块，然后将这些模块打包成 bundle。

核心概念

• 入口 entry
• 出口 output
• loader
• plugins

webpack是高度可配置的。

入口（entry）

入口起点指定了webpack从哪个模块开始构建依赖关系图。webpack进入入口起点后，就会找出入口起点依赖的模块和库，这些依赖项在之后会被处理，输出到名为bundles的文件中。

entry属性是可以配置的，默认值是./src，

出口（output）

output属性指定了webpack在哪里输出创建的bundles，以及如何命名这些文件。默认值为./dist。

entry和output的配置示例如下：

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' //bundle的名称
  }};

上面require的path模块是Node.js的核心模块，它是用来操作文件路径的。

事实上，entry和output可配置的特性还有很多，这里只做简单了解。

loader

一个完整的应用程序常常不止含有JS文件，loader就可以把各种类型的文件都转换成webpack能够处理的有效模块，因此它的作用是“转换”。

webpack loader 把所有类型的文件，转换成了依赖图和bundle可以直接引用的模块。

配置loader转换规则时的两个属性：

• text 属性 : 用于标识出应该被对应的loader转换的那些文件，
• use 属性 : 用于指定进行转换时使用的loader

 const path = require('path');

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

解释：在webpack中定义loader时，要定义在module.rules数组中，这里表示当webpack识别到.txt路径时，打包前用 raw-loader进行转换。

plugins

plugins 是插件接口功能，插件功能很强大。
如果要使用插件，可以直接 require() 它，然后添加到 plugins 数组中，比如：

plugins: [
    new HtmlWebpackPlugin( { template: './src/index.html' } )
]

这里通过new操作符创建了一个插件的实例，这样就可以在同一个配置文件中多次使用同一个插件。