webpack学习笔记

这是一份学习笔记,仅此记录一个学习过程

理解 WebPack

学习 WebPack 最好是从服务端的角度出发,或者说从 node 角度出发,到程序的角度,再到用户的角度;

反过来,一部分用户是不需要一些渲染的页面的,那么从服务端开始,编写用户需要的页面;

package.json 文件

package.json 是一个 node 生成的目录文件,下面 vue-cli 生成的一个 package.json;

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
26
27
28
29
30
31
32
33
34
35
{
"name": "vue-test",
"version": "1.0.0",
"description": "A Vue.js project",
"author": "yg_zinger",
"private": true,
"scripts": {
//more
},
"dependencies": {
"vue": "^2.5.2",
"vue-router": "^3.0.1"
},
"devDependencies": {
// more ...
"url-loader": "^0.5.8",
"vue-jest": "^1.0.2",
"vue-loader": "^13.3.0",
"vue-style-loader": "^3.0.1",
"vue-template-compiler": "^2.5.2",
"webpack": "^3.6.0",
"webpack-bundle-analyzer": "^2.9.0",
"webpack-dev-server": "^2.9.1",
"webpack-merge": "^4.1.0"
},
"engines": {
"node": ">= 4.0.0",
"npm": ">= 3.0.0"
},
"browserslist": [
"> 1%",
"last 2 versions",
"not ie <= 8"
]
}

常见字段解析

字段 解析
name 项目名
version 项目版本号,(大改,次改,小改)
author 作者名字
script 调用命令脚本,封装功能用
dependencies 项目运行所需的依赖包
devDependencies 项目开发所需的依赖包
engines 制定包的运行环境
browserlist 浏览器兼容性问题
config 用于添加命令行的环境变量
private 设置为ture 表示不发布到 npm 平台下

主要配置

如果是个人配置,大可不必使用脚手架,以及前端框架,把 webpack 当作一个打包工具即可;

个人配置上面不需要太复杂,就拿一个 webpack.config.js 来看即可

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
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
//导入所需的依赖
var FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin')
var webpack = require('webpack')
var path = require("path")

//模块输出
module.exports = {
// 入口, 可以是字符串,数组,对象
entry: './src/mian.js',
// 输出配置, 一般有 filenema=输出名字, path=输出地址, publicPath=输出公共资源的路径 字段
output: {
path: __dirname + '/dist',
publicPath: '/static/',
filename: 'build.js'
},
// 插件
plugins: [
new webpack.ProgressPlugin(),
new FriendlyErrorsWebpackPlugin()
],
// 模块处理
module: {
// 字段配置
rules: [{
//test = 正则匹配规则, use = 匹配对应 loader or 对象 options
test: /\.vue$/,
use: {
loader: "vue-loader",
options: {
loaders: {
css: ExtractTextPlugin.extract({
use: 'css-loader'
}),
stylus: ExtractTextPlugin.extract({
use: ["css-loader", "scss-loader"]
})
}
}
}
}, {
test: /\.css$/,
use: ['vue-style-loader', 'css-loader', 'scss-loader']
}, {
test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
use: [{
loader: "url-loader",
options: {
limit: 10000,
name: 'images/[name].[hash:7].[ext]' // 将图片都放入images文件夹下,[hash:7]防缓存
}
}]
}, {
test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
use: [{
loader: "url-loader",
options: {
limit: 10000,
name: 'fonts/[name].[hash:7].[ext]' // 将字体放入fonts文件夹下
}
}]
}, {
test: /\.js$/,
use: "babel-loader",
include: [path.resolve(__dirname, 'src')]
}]
}
}
// 压缩 javascript 的插件
new webpack.optimize.UglifyJsPlugin()
// 抽离 css 到css 文件
new ExtractTextPlugin({
filename: "css/style.css"
})

plugins 常用插件

现在大部分插件都会在 webpack 上面集成好,所以 webpack文档 就很关键了,多看文档多成长;

下面介绍部分常用的,也是使用一些脚手架常见的插件,与个人理解;

对代码处理的插件

插件 用处
BannerPlugin 给代码添加版权信息
CommonsChunkPlugin 用于共享抽离代码,整个项目的第三方;多个子 chunk 共用打包进入 父 chunk;Mainfest 每次打包都有变化
CompressionWebpackPlugin 使用配置算法
DefinePlugin 允许在编译时(compile time)配置的全局常量
EnvionmetPlugin 通过 DefinePlugin 来设置 process.env 环境变量的快捷方式
ProvidePlugin 自动加载模块,不需要 import 或者 require
UglifyJsPlugin 自动压缩 JS 代码(需要安装,不自带)

辅助打包后的代码

插件 用处
HtmlWebpackPlugin 自动依据 entry 的配置引入依赖(需要安装,不自带)
cleanWebpackPlugin 每次打包,清空配置的文件夹,包名保持不一致 (需要安装,不自带)

辅助开发的相关属性

属性 用处
devtool 打包后的代码与原始代码不同,控制是否生成 & 如何生成
devServer 打开本地服务器,需要配置
watch 持续监听文件的更改,重新构建文件,开发时期使用
watchOptions 定制 watch 模式
performance 展示性能提示
stats 配置打包过程输出的内容,值:none,norml,rerbese,errors-only

精细的相关属性配置

属性 用处
content 设置基础路径,默认当前
resolve 确定某块如何被解析,有默认值,可自定义
target 打包之后代码所执行的环境
extemals 控制某个依赖,不打包,直接从用户环境获取

结语

基本上到这里了,这里大部分东西都在 Webpack社区 里可以查得到,习惯用了脚手架,会让突然出现的错误,措手不及,所以我们需要学习,和记录;

当然,最近出了个 Parcel ,貌似更好用…有机会试一下