文章目录
  1. 1. Webpack基本概念
    1. 1.1. 入口(entry)
    2. 1.2. 出口(output)
    3. 1.3. loader
    4. 1.4. 插件(plugins)
    5. 1.5. 解析(resolve)
  2. 2. 项目配置
    1. 2.1. 目录组织
    2. 2.2. 基本配置文件
  3. 3. 结束语

最近项目中需要搭建一个多页面的环境,包括本地路由服务和分页面打包。
本节作为首节内容,主要简单介绍一些webpack相关的常用配置。

Webpack基本概念


更多的相关配置小伙伴们可以参考《正确的Webpack配置姿势,快速启动各式框架》
这里我们主要介绍搭建时涉及的一些配置。

四个核心概念:入口(entry)、输出(output)、loader、插件(plugins)。

入口(entry)

将您应用程序的入口起点认为是根上下文(contextual root)或app第一个启动文件。
一般来说,在Angular中我们将是启动.bootstrap()的文件,在Vue中则是new Vue()的位置,在React中则是ReactDOM.render()或者是React.render()的启动文件。

1
2
3
module.exports = {
entry: './path/to/my/entry/file.js'
};

出口(output)

output属性描述了如何处理归拢在一起的代码(bundled code),在哪里打包应用程序。一般需要以下两点:

  • filename: 编译文件的文件名(main.js/bundle.js/index.js等)
  • path:对应一个绝对路径,此路径是你希望一次性打包的目录
1
2
3
4
5
6
module.exports = {
output: {
filename: 'bundle.js',
path: '/home/proj/public/assets'
}
};

loader

webpack把每个文件(.css, .html, .scss, .jpg, etc.) 都作为模块处理。但webpack只理解JavaScript。

如果你看过生成的bundle.js代码就会发现,Webpack将所有的模块打包一起,每个模块添加标记id,通过这样一个id去获取所需模块的代码。
而我们的loader的作用,就是把不同的模块和文件转换为这样一个模块,打包进去。

loader支持链式传递。能够对资源使用流水线(pipeline)。loader链式地按照先后顺序进行编译,从后往前,最终需要返回javascript。

不同的应用场景需要不同的loader,这里我简单介绍几个(loader使用前都需要安装,请自行查找依赖安装):

  • babel-loader

官网在此,想要了解的也可以参考Babel 入门教程
babel-loader将ES6/ES7语法编译生成ES5,当然有些特性还是需要babel-polyfill支持的(Babel默认只转换新的JavaScript句法,而不转换新的API,如Promise等全局对象)。

而对于babel-loader的配置,可以通过options进行,但一般更常使用.babelrc文件进行:

1
2
3
4
{
"presets": [], // 设定转码规则
"plugins": [] // 插件
}
  • css相关loader

    • css-loader: 处理css文件中的url()
    • style-loader: 将css插入到页面的style标签
    • less-loader: less转换为css
    • postcss-loader(autoprefixer-loader): 自动添加兼容前缀(-webkit--moz-等)
  • url-loader/file-loader: 修改文件名,放在输出目录下,并返其对应的url

    • url-loader在当文件大小小于限制值时,它可以返回一个Data Url
  • html-loader/raw-loader: 把Html文件输出成字符串

    • html-loader默认处理html中的<img src="image.png">为require(“./image.png”),需要在配置中指定image文件的加载器

插件(plugins)

loader仅在每个文件的基础上执行转换,插件目的在于解决loader无法实现的其他事
由于plugin可以携带参数/选项,需要在wepback配置中,向plugins属性传入new实例。

解析(resolve)

这些选项能设置模块如何被解析,因为这里会使用到所以也介绍一下用到的:

  • resolve.extensions

    • 自动解析确定的扩展。默认值为:[".js", ".json"]
  • resolve.alias

    • 创建importrequire的别名,来确保模块引入变得更简单。

      如果使用typescript的话,我们还需要配置tsconfig.json

项目配置


目录组织

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
├── build/ # webpack配置参数文件
│ └── ...
├── src/ # 项目代码入口
│ ├── page1/ # 第一个页面或者应用
│ │ ├── main.js # 页面/应用入口文件
│ │ └── ...
│ └── page2/ # 第二个页面或者应用
│ │ ├── main.js # 页面/应用入口文件
│ │ └── ...
│ └── pageN/ # 第N个页面或者应用
│ ├── main.js # 页面/应用入口文件
│ └── ...
├── .babelrc # babel编译参数
├── index.html # 主页模板,所有的页面共用该index.html入口
└── package.json # 项目文件,记载着一些命令和依赖还有简要的项目描述信息

基本配置文件

由于我们需要实现开发时多页面共同启动,打包时分块打包的功能,故在不同环境下我们的入口entryplugins等将会不一致,这里我们先省略:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
var path = require('path')
var webpackConfig = {
entry: {},
output: {
path: path.join(__dirname, 'dist'),
filename: './[hash].js'
},
resolve: {
extensions: ['.js', '.json'] // '.ts' and more
},
module: {
rules: [
{
test: /\.js$/,
loader: 'babel-loader',
include: [path.resolve(__dirname, "./src")]
},
// more loaders...
]
},
plugins: []
}
module.exports = webpackConfig;

结束语


这里我们搭建了最基本的目录结构以及不完整的webpack配置,后续我们将深入进行build和dev的过程。
目前的代码并没有什么太大的作用,后面补上完整项目的代码吧。

查看Github有更多内容噢:https://github.com/godbasin
更欢迎来被删的前端游乐场边撸猫边学前端噢

码生艰难,写文不易,给我家猪囤点猫粮了喵~

作者:被删

出处:https://godbasin.github.io

本文版权归作者所有,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则保留追究法律责任的权利。

文章目录
  1. 1. Webpack基本概念
    1. 1.1. 入口(entry)
    2. 1.2. 出口(output)
    3. 1.3. loader
    4. 1.4. 插件(plugins)
    5. 1.5. 解析(resolve)
  2. 2. 项目配置
    1. 2.1. 目录组织
    2. 2.2. 基本配置文件
  3. 3. 结束语