盒子
盒子
文章目录
  1. entry points
  2. output
  3. loader
  4. 插件
  5. 模块热替换HMR

善其器之webpack

本质上,webpack是一个现代JavaScript应用程序的静态模块打包器(module bundler)。当webpack处理应用程序时,它会递归的构建一个依赖关系图,其中包含应用程序需要的每个模块,然后将所有这些模块打包成一个或多个bundle。

在开始前,需要先了解webpack中的四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)

  • entry:应该使用哪个(哪些)模块来作为构建其内部依赖图的开始。
  • output:输出所创建的bundles,以及这些文件的命名。
  • loader:将所有类型的文件转换为webpack能够处理的有效模块。
  • plugins:打包优化、压缩、重新定义环境中的变量等。

entry points

标准用法:entry: { [entryChunkName: string]: string | Array<string> }

1
2
3
4
5
entry: {
pageOne: './src/pageOne/index.js',
pageTwo: './src/pageTwo/index.js',
pageThree: './src/pageThree/index.js',
}

output

output选项可以控制webpack如何向硬盘写入编译文件。

output的值是一个对象,包括filenamepathfilename输出文件的文件名,path为输出目录的绝对路径。

1
2
3
4
output: {
filename: 'bundle.js',
path: '/home/project/public/assets',
}

此配置将一个bundle.js文件输出到/home/project/public/assets目录中。

loader

loader用于对模块的源代码进行转换。

使用loader加载CSS文件:

1
npm install --save-dev css-loader

将Typescript转换为JavaScript:

1
npm install --save-dev ts-loader

在配置文件中进行配置:

1
2
3
4
5
6
7
// webpack.config.js
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' },
{ test: /\.ts$/, use: 'ts-loader' },
]
}

在webpack配置中也支持一种文件引入多个loader:

1
2
3
4
5
6
7
8
9
10
11
12
// webpack.config.js
module: {
rules: [
{ test: /\.css$/,
use: [
{ loader: 'style-loader' },
{ loader: 'css-loader' }
}
]
}
]
}

插件

由于插件可以携带参数/选项,所以在webpack配置中,向plugins传入new实例。

1
2
3
4
5
6
7
8
// webpack.config.js
const webpack = require('webpack');

const cnfig = {
plugins: [
new webpack.BannerPlugin('版权所有,翻版必究')
]
}

模块热替换HMR

模块热替换功能会在应用程序中替换、添加或删除模块,而无需加载整个页面。主要通过以下方式来显著加快开发速度:

  • 保留在完全重新加载页面时丢失的应用程序状态。
  • 只更新变更内容,以节省宝贵的开发时间。
  • 调整样式更加快速,几乎相当于在浏览器调试器中更改样式。

个人微信公众号

欢迎关注公众号
扫码关注我的微信公众号-大前端合集
  • 微信公众号-大前端合集