Webpack v4 渐进式学习

Webpack v4 已发布了一些时日,本文就带你走进Webpack4.0
– 本章节参考版本 webpack v4.2.0
– 阅读本文前,你应该先了解模块化构建应用程序,或者至少了解如何构建一个JavaScript模块

什么是webpack?

它是一个“为现代JavaScript应用程序”服务的静态资源模块打包器(bundler)。webpack只做两件事:
1、把应用中所有需要载入的模块进行递归遍历,生成依赖图谱。
2、把应用中需要打包的模块打成一个或多个包(bundles)。

基础概念

入口(Entry)

决定了webpack从哪个模块开始构建依赖关系图。当webpack进入这个模块后会找到它依赖的其他模块,包括直接的依赖和间接的依赖关系。这个入口是可以指定的,可以是一个或多个,我们可以在webpack配置文件里进行设置。

// webpack.config.js 中配置入口,例如:
module.exports = {
  entry: './src/index/file.js'
};

// 或者

module.exports = {
  entry: ['./src/index', './src/sub']
};

entry默认值是:”./src”,对于以array形式传入entry,多个文件会被打入一个包(chunk)中。更多详细设置请见entry points

输出(Output)

output属性决定了webpack打包文件的输出路径和文件名。

// webpack.config.js (当前文件路径: /Users/Admin/git/demo)
const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'), //将dist解析成绝对路径,即输出 '/Users/Admin/git/demo/dist'
    filename: 'demo-bundle.js'
  }
};

‘path’是node.js内置的模块,是处理文件路径的小工具,具体用法查阅path API
__dirname是node.js中的全局变量,存储的是当前文件所属的绝对目录。
output默认值是:”./dist”
更多详细设置请见output

加载器(Loaders)

webpack本身只能处理JavaScript文件的打包,而loader扩展了webpack的功能,使其可以打包任何类型的文件。loader可以把那些webpack无法直接处理的文件类型,转换成有效的模块([查看webpack模块定义)。本质上,webpack loader可以将程序中使用到的任何文件加入依赖图谱。
官方对loader还进行了补充描述:

导入任何类型的模块是webpack特有的功能,可能不受其他打包程序或任务运行程序的支持。 为了保证语言的扩展性,因为它允许开发人员构建更准确的依赖关系图。

// webpack.config.js 文件
const path = require('path');

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

module.exports = config;

test属性:限定哪些文件需要转换
use属性:为文件指定0loader
module中的rules定义了一系列规则,webpack的编译器(compiler)会遵循这些规则,当遇到test设定的文件时(通常是调用require()或者import),会使用loader先进行转换。
更多loader详细内容请见loaders

插件(Plugins)

plugins扩展了webpack处理任务的能力,诸如优化、最小化。webpack提供强大的插件接口。
这么说肯定不具体,可以直接查看webpack的插件列表,可以更具象地了解插件的作用。
webpack插件列表
插件分官方和第三方的,理论上任何人都可以贡献插件。不过写webpack插件前,需要先了解插件API,这部分功能让开发者可以感受到webpack的开放态度。
plugin的使用分几步:
1、引入依赖(require(‘plugin-name’);)
2、插件注入(在配置中的plugin array添加插件实例)

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 已安装到本地
const webpack = require('webpack'); //to access built-in plugins

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

module.exports = config;

在配置文件中调用webpack插件是最直接的方法,webpack在编译执行时会按顺序运行插件,并产生相应的结果。
当然,也有很多更实用的插件案例可以参考:传送门

模式(Mode)

mode的值有 development | production | none 三种,设置模式可以调用webpack的内建优化设置。

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

或者使用webpack-cli也可以达到同样的效果

webpack --mode=production

以上表示,执行webpack时使用”production”模式进行输出

关于模式,跟内建插件的对应关系如下:
mode: ‘development’
相当于
plugins: [
new webpack.NamedModulesPlugin(),
new webpack.DefinePlugin({ “process.env.NODE_ENV”: JSON.stringify(“development”) }),
]

mode: ‘production’,
相当于
plugins: [
new UglifyJsPlugin(/* … */),
new webpack.DefinePlugin({ “process.env.NODE_ENV”: JSON.stringify(“production”) }),
new webpack.optimize.ModuleConcatenationPlugin(),
new webpack.NoEmitOnErrorsPlugin()
]

以上就是Webpack的基础部分。
接下来,我们将了解webpack的其他几个组成部分。(待续…)

参考

webpack.js官方文档

trick & tip

webpack官方文档中的常用术语(行话)
emitted/emit :等同于 produced 或者 discharged,译为放出、产生、卸货、发包。
yell at you :大声嚷嚷,可以解释为告警。

发表评论

电子邮件地址不会被公开。 必填项已用*标注