大前端学习之手摸手系列深度解锁Webpack4
以下内容来自 拉勾教育大前端训练营 以及在学习过程中对笔记上进行的一个整理,
该文将使用Webpack 版本4.43.0, node.js 版本 10.21,将从以下二个部分来使用webpack进行深入使用
- 从简单的使用
Webpack到深入 - Webpack的原理, 正在整理中…
1、Webpack 是什么
Webpack是一种前端构建工具, 一个静态模块打包器(module bunder).
在Webpack看来, 前端所有的资源文件(js/json/css/img/less/…)都会作为模块处理
它将根据模块的依赖关系进行静态分析,打包生成对应的静态资源(bundle)。
2、Webpack的优点
- 专注处理模块化的项目,能做到开箱即用,一步到位
- 可通过
Plugin扩展,完整好用又不失灵活 - 使用场景不限于web开发
- 社区庞大活跃, 经常引入紧跟时代的新特性,能为大多数场景找到已有的开源扩展
- 良好的开发体验
3 、Webpack 的五大核心概念
入口 Entry
入口 Entry 指示Webpack以那个文件为入口起点开始打包,分析构建内部依赖图
module.exports = {
entry: './src/index.js'
};
输出 (Output)
output 属性告诉 Webpack 在哪里输出它所创建的bundles，以及如何命名这些文件，默认值为./dist基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中。你可以通过在配置中指定一个 output 字段，来配置这些处理过程
const path = require('path');
module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'),
filename: 'bundle.js'
}
};
Loader
loader 让Webpack能够去处理那些非JavaScript文件（webpack 自身只理解 JavaScript）loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理
module: {
rules: [
{
test: /\.css$/,
use: [
'style-loader',
'css-loader'
]
},
]
}
Plugin
Plugin用于扩展 Webpack的功能,各种各样的Plugin几乎可以让 Webpack 做任何与构建相关的事情, Plugin 的配置很简单,Plugins 配置项接收一个数组,数组里面的每一项都是一个要使用Plugin的实例。
// yarn add html-webpack-plugin --dev
const HtmlWebpackPlugin = require('html-webpack-plugin')
plugins: [
new HtmlWebpackPlugin({
template: './index.html'
})
]
模式 (mode)
告诉Webpack使用相应模式的内置优化
development 能让代码把本地调试运行环境
production 能让代码运行优化上线运行的环境
module.exports = {
mode: 'production',
<!--mode: 'development'-->
};
4、初始化项目
- 新建文件夹,文件名称随意,编辑器打开该文件夹或通过cmd切换到该该文件夹
- 初始化pageage.json文件
- 安装
yarn webpack webpack-cli --dev到开发环境 - 目录, 这里的内容可以随便填写
mkdir webpack-demo
cd webpack-demo
// 目录
// 初始化package.json
yarn init --yes
// 安装webpack, webpack-cli 到devDependencies 开发环境依赖中
yarn webpack webpack-cli --dev
// heading.js
export default () => {
let element = document.createElement('h1');
element.textContent = 'Hello Webpack';
element.className = 'title';
return element
}
// index.js
import createHeading from './heading.js'
const heading = createHeading()
document.body.append(heading)
// index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Hello Webpack</title>
</head>
<body>
<script src="./src/index.js"></script>
</body>
</html>
- 执行
yarn webpack命令, 接着我们的根目录下就有一个为dist文件,里面有个main.js,然后我们将index.html中的属性修改为dist文件,打开就可以直接看到我们创建的一个h1标签了 - 为了每次打包使用方便,我们还可以在package.json中配置scripts,这样我们就后面就可以直接执行
yarn build就行了
<script src="./dist/main.js"></script>
"scripts": {
"build": "webpack"
},
5、处理样式文件
处理样式文件我们需要借助loader, 一般常用的loader 有 css-loader less-loader sass-loader
在根目录下创建 webpack.config.js在src 目录下创建css文件夹, index.css, index.less样式可以随便写
安装依赖
yarn add style-loader css-loader less-loader --dev
// webpack.config.js
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
filename: 'bundle.js', // 输出文件名
// __dirname是node.js的变量,代表当前文件目录绝对路径
path: resolve(__dirname, 'dist') // 输出路径
},
// 详细loader配置
module: {
rules: [
{
test: /\.(css|less)$/, // 匹配css 文件
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
]
},
// plugins的配置
plugins: [],
// 模式
mode: 'development', // 开发模式
// mode: 'production',
}
这几个loader的作用
style-loader动态创建style标签,将js中的样式资源插入进行css-loader将css 文件变成commonjs模块加载到js中less-loader将less文件编译成css文件
注意:
- 这里需要注意use数组中
loader执行顺序,它是从下到上, 或者说从右到左 - 还有一个参数
pre,可以修优先级
接着我们可以去执行打包
执行yarn build命令, 再次运行index.html可以看到样式资源也被打包到了bundle.js, 不过这里我们还是要去手动修改一下index.html的 js文件。后面我们会将html一起打包就不需要手动引入了
6、处理HTML资源
html-webpack-plugin 的作用是什么呢,其实它的作用就是帮助我们将打包的js文件以及css等静态资源文件文件自动引入到index.html中,原来我们都需要手动引入,太累了,emmm 我们需要懒一点
首先安装依赖
yarn add html-webpack-plugin --dev
// webpack.config.js 头部引入
const HtmlWebpackPlugin = require('html-webpack-plugin')
// 在plugin中使用
module.exports = {
plugins: [
// 默认创建一个空HTML,自动打包输出的所有资源,这里对应index.html文件
new HtmlWebpackPlugin({
// 复制 './index.html'文件,并自动打包引入输出所有资源
template: './index.html'
})
]
}
执行 yarn build 打包完成后dist目录此时会多出一个index.html文件,此时可以看到index.html中会把我们的js资源文件自动插入到页面中
7、处理图片资源
我们在项目开发中,肯定少不了引入本地图片资源,那如何处理图片资源呢,我们还需要用loader去处理它
可以用 url-loader 或者 file-loader 来处理本地的资源文件
yarn add url-loader html-loader --dev
{
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 图片大小小于10kb,就会被base64处理
// 优点: 减少请求数量(减轻服务器压力)
// 缺点: 图片体积会更大(文件请求速度更慢)
limit: 10 * 1024,
esModule: false,
name: '[hash:10].[ext]',
outputPath: 'image'
}
},
{
test: /\.html$/,
// 处理html文件img图片
loader: 'html-loader',
},
// 因为url-loader默认是使用es6模块化解析的,而html-loader引入图片是commonjs,
// 解析会出现问题:[object Module],使用commonjs解析
// 关闭url-loader的es6 module esModule: false
url-loader的配置
-
limit: 10*1024即图片大小小于10kb的时候,就会被base64处理,超过10kb的就会被拷贝到dist目录,这里这么做优点是可以减少请求数量(减轻服务器的压力),缺点图片的体积会更大(文件请求速度更慢) -
esmMoule: false这里是为了解决
-
name: '[hash:10].[ext]给图片重命名, [hash:10] 取图片前10位 -
outputPath:输出目录 -
执行
yarn build
8、处理其他资源(字体图标)
对于字体图片文件我们可以使用url-loader或者file-loader
这里我是在阿里矢量图标库下了几个字体图标文件
yarn add file-loader --dev
阿里矢量图标库
// src 目录创建font
// index.js 导入iconfont.css
import './font/iconfont.css'
// index.html添加图标
<span class="iconfont icon-caihong"></span>
<span class="iconfont icon-qiwen-diwen"></span>
<span class="iconfont icon-ganzao"></span>
<span class="iconfont icon-rishi-riquanshi"></span
9、Webpack 与 ES 2015
用来处理ES6语法，将其编译为浏览器可以执行的js语法
由于Webkpack默认就能处理我们的代码中的export和import,但是并不能转换其他的ES6等新特性,我们需要为js文件配置一个额外的编一些型loader,那最常见最常见的就是babel-loader,由于babael-loader需要额外的依赖于babel核心模块,所以我们需要安装多个模块,以及用于去完成具体 的特性转换插件的集合叫babel/preset-env
安装依赖
yarn add babel-loader @babel/core @babel/preset-env --dev
{
test: /\.js$/,
exclude: /node_modules/, // 排除 node_modules 目录
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
执行yarn build 此时我们再去看dist目录,会发现js文件中的箭头函数等属性被转换es5
10、自动清除dist目录
在之前打包每次都会留下原来的文件,需要手动删除,那么如何能自动删除呢,我们需要加入了这个插件后在打包前每次都会自动清除了。是不是很方便呢
安装依赖
yarn add clean-webpack-plugin --dev
// webpack.config.js
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
// 使用
plugins: [
new CleanWebpackPlugin()
],
11、搭建开发环境
Source Map
Source Map是一种提供源代码到构建后代码映射技术,如果构建后代码出错了,构建后的代码和源代码千差万别,找代码出错位置难,可读性非常差,- 而选择了对应的
sourc-map之后, 构建后的代码出错了可以追踪源代码的错误,利于我们调试,找出代码出错的原因。 - 解决了源代码和运行代码不一致所所产生的问题
Webpack支持转换生成的代码输出对应Source Map文件,以方便在浏览器中调试,控制Source Map输出的Webpack配置选项是devtool,他有很多选项
具体可以看这里 Source Map
选择Source Map
对于开发环境
以下选项非常适合开发环境
对于生产环境
开发环境推荐
cheap-module-eval-source-map
能够定位到错误代码的准确信息和源代码错误位置, 综合构建速度
生产环境推荐
源代码要不要隐藏
使用 none或者source Map, 不暴露源代码
开发环境完整代码
// resolve 用来拼接绝对路径的方法
const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
// webpack配置
// 入口起点
entry: './src/index.js',
// 输出
output: {
filename: 'bundle.js', // 输出文件名
// __dirname是node.js的变量,代表当前文件目录绝对路径
path: resolve(__dirname, 'dist') // 输出路径
},
devServer: {
contentBase: resolve(__dirname, 'dist'),
compress: true, // 启动gzip压缩
port: '3000', // 端口号,
open: true, // 自动打开浏览器
},
// 详细loader配置
module: {
rules: [
{
test: /\.(css|less)$/,
use: [
// use数组中loader执行顺序,从下到上
// 创建style标签,将js中的样式资源插入进行
'style-loader',
// 将css 文件变成commonjs模块加载到js中
'css-loader',
// 将less文件编译成css文件
'less-loader'
]
},
{
// 处理图片
test: /\.(jpg|png|gif)$/,
loader: 'url-loader',
options: {
// 图片大小小于10kb,就会被base64处理
// 优点: 减少请求数量(减轻服务器压力)
// 缺点: 图片体积会更大(文件请求速度更慢)
limit: 10 * 1024,
esModule: false,
// [hash:10] 取图片前10位
name: '[hash:10].[ext]',
outputPath: 'image'
}
},
{
test: /\.html$/,
// 处理html文件img图片
loader: 'html-loader'
},
{
test: /\.(eot|woff2?|ttf|svg)$/,
use: [
{
loader: "file-loader",
options: {
name: "[name]-[hash:5].min.[ext]",
limit: 3000,
outputPath: 'font',
}
}
]
}
]
},
// plugins的配置
plugins: [
// 默认创建一个空HTML,自动打包输出的所有资源,这里对应index.html文件
new HtmlWebpackPlugin({
// 复制 './index.html'文件,并自动打包引入输出所有资源
template: './index.html'
}),
new CleanWebpackPlugin()
],
// 模式
mode: 'development', // 开发模式
// mode: 'production', // 生产模式
}
12、Webpack devServer
yarn add webpack-dev-server --dev
- 在webpack.config.js中配置devServer
devServer: {
contentBase: resolve(__dirname, 'dist'),
compress: true, // 启动gzip压缩
port: '3000', // 端口号,
open: true, // 自动打开浏览器
},
- package.json添加
"scripts": {
"serve": "webpack-dev-server --open --config webpack.config.js",
}
devServer详细配置
devServer: {
contentBase: resolve(__dirname, 'dist'),
watchContentBase: true, // 监视contentBase目录下的所有文件,一旦文件变化就会reload
wacthOptions: {
ignored: /node_modules/
},
compress: true, // 启动gzip压缩
port: 8020, // 端口
host: 'loaclhost', 域名
hot: HMR, // 开启HMR功能
clientLogLevel: 'none', // 不要显示启动服务器日志信息
quiet: true, // 除了一些基本期待能够信息以外,其他内容都不要显示
overlay: false, // 如果出错了,不要全屏提示
proxy: {}, // 服务器代码 ---> 解决开发环境跨域问题
}
webpack-dev-server只会在内存中编译打包,不会有任何输出
执行 yarn serve 此时就会自动打开浏览器啦,并且会自动编译,自动刷新浏览器,提升开发体验。
13、 优化 提取css成单独文件
- css 在打包过程在js文件中, 会导致js文件体积变大, 影响加载速度,同时因为是先加载js,才能通过style标签插入到页面中, 会出现闪屏现象,体验不好,所以我们需要优化将css 从js 提取出来,还要对css代码进行压缩
- 样式部分和js代码兼容问题
- 处理好这些可以让我们的代码更快更好更强的运行, 性能会更好,可以保证在各个浏览器平稳运行
首先我们需要抽离CSS所用到的loader
yarn add mini-css-extract-plugin --dev
// 这里我们为了构建生产环境 新建一个文件webpack.prod.js
// 同时在package.json 可以加入
"scripts": {
"serve": "webpack-dev-server --open --config webpack.config.js",
"build:prod": "webpack --open --config webpack.prod.js",
"build": "webpack"
},
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
// 我们需要将style-loader 替换成 MiniCssExtractPlugin.loader
rules: [
{
test: /\.(css)$/,
// 使用哪些loader
use: [
// use 数组中loader 执行顺序, 从右到左,从下到上一次执行
// MiniCssExtractPlugin取代style.loader
// 提取js中的单css 成单独文件
{
loader: MiniCssExtractPlugin.loader
},
'css-loader', // 将css文件变成commonjs 模块加载到模块中,里面内容是字符串
]
},
{
test: /\.(less)$/,
// 使用哪些loader
use: [
// use 数组中loader 执行顺序, 从右到左,从下到上一次执行
// MiniCssExtractPlugin取代style.loader
// 提取js中的单css 成单独文件
{
loader: MiniCssExtractPlugin.loader
},
'css-loader', // 将css文件变成commonjs 模块加载到模块中,里面内容是字符串
'less-loader' // 将less文件编译成css 文件
]
}
]
plugins: [
new MiniCssExtractPlugin({
filename: 'css/common.css'
})
]
14、 CSS兼容性处理
这里我们需要用到postcss-loader, PostCSS( http://postcss.org）是一个 css 处理工具，和 scss 的不同之处在于它可以通 过插件机制灵活地扩展其支持的特性，而不像 scss 那样语法是固定的。 PostCSS 的用处非 常多，包括向 css 自动加前缀、使用下一代 css 语法等。
安装依赖
yarn add postcss-loader postcss-preset-env --dev
修改css-loader配置
{
test: /\.css$/,
use: [
// use数组中loader执行顺序,从下到上
// 创建style标签,将js中的样式资源插入进行
// MiniCssExtractPlugin取代style.loader
{
loader: MiniCssExtractPlugin.loader
},
// 将css 文件变成commonjs模块加载到js中
'css-loader',
{
loader: 'postcss-loader',
options: {
ident: 'postcss',
plugins: () => [
require('postcss-preset-env')()
]
}
}
]
}
在 package.json 中的browserslist里面的配置,通过配置兼容指定的css 兼容性样式
"borwserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"prodection": [
">0.2%",
"not dead",
"not op_min all"
]
},
测试一下,加入transition打包之后 默认会给我们添加前缀–webkit
.container img {
width: 300px;
height: 300px;
transition: width 2s, height 2s, background-color 2s, transform 2s;
border-radius: 20px;
}
.container img:hover{
transform: rotate(180deg);
}
15、压缩CSS
在生产环境中,我们需要对代码进行优化,为的就是我们的应用能在线上性能的快,很好的运行,所以这里我们需要使用 optimize-css-assets-webpack-plugin 这个插件来帮助我们对代码进行压缩
yarn add optimize-css-assets-webpack-plugin --dev
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 使用很简单,只需调用new
plugins: [
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
]
16、HTML压缩
对HTML文件压缩其实也是为了优化应用的加载速度,在plugins中配置HtmlwebpackPlugin加入minify参数就行了
new HtmlWebpackPlugin({
template: './src/index.html',
minify: {
// 移除空格
collapseWhitespace: true,
removeComments: true // 移除注释
}
}),
17、JS语法检查ESlint
- ESLint 可以统一 js 的开发规范与风格，一个团队内部的每个人的代码风格都不一样，比如有的人还在用 es5，有的人用 es6+,当查阅或修改别人代码的时候会很难下手，效率不高，最后造成项目难维护，ESLint 则会解决这个痛点
- JS 是松散类型的语言，没有编译的过程。只有运行时才能找到问题，开发时很容易出错
- ESLint 有自己的一套规范，当然，我们也可以自定义规则
- ESLint规则
随意我们需要使用ESLint来帮助我们约束代码规范
parser（指定解析器）
babel-eslint 解析器是一种使用频率很高的解析器，因为现在很多公司的很多项目目前都使用了es6,
为了兼容性考虑基本都使用babel插件对代码进行编译。而用babel编译后的代码使用 babel-eslint这款解析器可以避免不必要的麻烦
安装依赖
yarn add eslint eslint-loader babel-eslint --dev
// 新建.eslintrc.js
module.exports = {
"extends": "airbnb-base",
root: true,
parserOptions: {
sourceType: 'module',
},
parser: 'babel-eslint',
env: {
browser: true,
es6: true
},
rules: {
"indent": ["error", 2], // 代码缩进
"semi": [1, "always"], // 要求在语句末尾使用分号
"camelcase": [2, {"properties": "always"}], // 强制属性名称为驼峰风格
"object-curly-spacing": "never", // 不允许花括号中有空格
"no-var": '',
"no-alert": 0 // 禁止使用alert
}
};
接下来我们在webpack.config.js配置loader
{
test: /\.js$/,
exclude: resolve(__dirname, 'node_modules'),
enforce: "pre", // 优先执行
loader: 'eslint-loader',
options: {
// 自动修复
fix: true
}
}
// 测试一下,写入有问题的代码
var createHeading = function createHeading() {
let element = document.createElement('h1');
element.textContent = 'Hello Webpack';
element.className = 'title';
return element;
};
let obj = { a: 1}
var no_camelcased = () => {
console.log('大白菜');
};
var dosomeing = () => {
// ...
alert(5)
};
const add = function add(a, b) {
return a + b
}
export { createHeading, add }
//
执行 yarn serve 然后会提示一系列的ESlint 语法检查, 我们只需将有问题的再次修改就行了
18、Webpack HMR
- 极大的提高了开发者的工作效率
- 全称
Hot Module Replacement - 自动刷新会导致整个页面状态丢失
HMR模块热替换- 热替换只将修改的模块实时替换至应用中
- 在
devServe中配置hot: true就默认开启热更新了 - 样式文件: 可以开启
HMR,在style-loader内部实现了 JS文件: 默认不能使用HMR功能- 开启
HMR webpack-dev-server --hot也可通过配置文件开启 - 解决: 修改
entry入口,将HTML文件引入
// entry: ['./src/js/index.js', './src/index.html']
const webpack = require('webpack')
devServer: {
hot: true
}
plugins: [
new webpack.HotModuleReplacementPlugin()
]
// js
if (module.hot) {
// 一旦module.hot 为true 说明开启了HMR功能
// 让HMR功能代码生效
module.hot.accept('./heading', () => {
console.log('文件更新了');
});
}
19. Code Split 文件分割
多入口
entry: {
// 多入口
main: './src/js/index.js',
test: './src/js/test.js'
}
// 输出
output: {
filename: '[name].[contenthash:10].js', // 输出文件名
// __dirname是node.js的变量,代表当前文件目录绝对路径
path: resolve(__dirname, 'build') // 输出路径
},
// 重新打包
// main.67a94b6142.js
// test.9fd198e20a.js
// 缺点 不灵活
optimization可以将node_modules中的代码单独打包一个chunk最终输出 自动分析多入口chunk中,有没有公共的文件,如果有会打包成单独一个chunk
// 会输出多个js 文件代码
optimization: {
splitChunks: {
chunks: 'all'
}
}
20. 不同环境配置
配置文件根据环境不同导出不同配置
webpack.common.js
webpack.dev.js
webapack.prod.js
安装 yarn add wenpack-merge --dev
yarn webpack --config webpack.prod.js // 生产环境
const common = require('./webpack.common)
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const { CopyWebpackPlugin } = require('copy-webpack-plugin')
module.exports = merge(common, {
mode: 'production',
plugins: [
]
})