一篇文搞懂webpack[零基础教学+手把手带你搞项目]
文章目录
-
- 一 简介
- 二 新手上路
-
- 2.1 环境准备
- 2.2 创建项目
- 2.3 项目上手
- 三 webpack基础用法
-
- 3.1 核心概念了解
-
- 入口 - entry
- 出口 - Output
- 加载 - loaders
- 插件 - Plugins
- 环境 - Mode
- 3.2 基础解析-loaders使用
-
- ES6 与 JSX
- CSS解析
- Less解析
- 解析图片
- 解析字体
- 四 webpack文件监听
- 五 功能优化-plugins使用
-
- 5.1 webpack热更新
- 5.2 代码压缩
-
- JS压缩
- CSS压缩
- html压缩
一 简介
webpack现在可谓炙手可热，要是不懂，就难免让人觉得有点跟不上时代。
其实webpack只是一种工具，我们以使用为目的去学习它，就一点也不难哦，本篇文章让您在一个小时内上手webpack，没时间学习也可以先收藏哦。
webpack主要用于兼容性处理，代码预处理转换处理，压缩处理。
如转换ES6语法，转换JSX 指令等
CSS前缀补全/预处理器，代码压缩混淆，图片压缩等。
webpack的配置文件默认为webpack.config.js。
webpack --config命令可用于指定配置文件。
二 新手上路
2.1 环境准备
安装nodejs和npm，直接在nodejs官网下载安装包即可，npm作为nodejs附属包同时自动安装，无需另外安装。
使用nodejs安装包安装后可用命令行在cmd窗口查看安装版本。
![一篇文搞懂webpack[零基础教学+手把手带你搞项目]_第1张图片](http://img.e-com-net.com/image/info8/cb66a173521e45e6b90f9efed8b0dcd0.jpg)
2.2 创建项目
首先，创建项目目录(空目录)，使用命令行创建一个初始化的package.json。
npm init -y
![一篇文搞懂webpack[零基础教学+手把手带你搞项目]_第2张图片](http://img.e-com-net.com/image/info8/4c4fc3a49ab14583b71c30d938e42f91.jpg)
向项目目录中安装webpack依赖，安装后目录中出现node_modules文件。
npm install webpack webpack-cli --save-dev
![一篇文搞懂webpack[零基础教学+手把手带你搞项目]_第3张图片](http://img.e-com-net.com/image/info8/5f082ab731bb4c0482f2694f1fc946e9.jpg)
注意到上文命令行中包含后缀 --save-dev，含义如下。
- –save ： dependencies 键下，发布后还需要依赖的模块，譬如像jQuery库或者Angular框架类似的，我们在开发完后后肯定还要依赖它们，否则就运行不了。
- –save-dev ： devDependencies 键下，开发时的依赖比如安装 js的压缩包gulp-uglify 因为我们在发布后用不到它，而只是在我们开发才用到它。
主要区别在于打包后是否保留该依赖，webpack本身是打包工具，当然不需要保留啦。
安装成功后查看安装情况。
./node_modules/.bin/webpack -v
![一篇文搞懂webpack[零基础教学+手把手带你搞项目]_第4张图片](http://img.e-com-net.com/image/info8/b0f6291e12074d879acae3b1f2fb9e8c.png)
2.3 项目上手
现在我们就可以使用webpack做项目了，首先做一个最简单的例子。
首先z在项目目录中创建配置文件webpack.config.js，
'use strict'
const path = require('path'); // 引入一个依赖
module.exports = {
entry: './src/index.js', // 入口
output: {
// 出口
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
},
mode: 'production'
};
在上面文件中，我们指定入口为’./src/index.js’，输出文件在dist文件夹中，名字为’bundle.js’。
翻译一下也就是，webpack会以’./src/index.js’为入口，将其与其所有的依赖打包为一个出口文件’bundle.js’放置在目录dist中。
我们首先创建文件’./src/index.js’与其依赖文件’./src/helloworld.js’。
在index.js中引入helloworld.js文件。
// './src/index.js'
import {
helloworld } from './helloworld';
document.write(helloworld());
// './src/helloworld.js'
export function helloworld() {
return 'hello webpack'
}
此时项目结构如下图。
![一篇文搞懂webpack[零基础教学+手把手带你搞项目]_第5张图片](http://img.e-com-net.com/image/info8/101e768e7c3d4833b78e32107441276f.jpg)
文件准备完毕，我们使用webpack命令行打包。
./node_modules/.bin/webpack
![一篇文搞懂webpack[零基础教学+手把手带你搞项目]_第6张图片](http://img.e-com-net.com/image/info8/5bd27df8e3714666b4894cfa5689bb5b.png)
项目目录下，出现了文件夹dist，其中含有bundle.js，与前面配置文件出口路径与名称对应。
![一篇文搞懂webpack[零基础教学+手把手带你搞项目]_第7张图片](http://img.e-com-net.com/image/info8/1a1581adfb19460c81dcb34516848aed.jpg)
可以看到，bundle.js文件是入口文件的整合版，运行效果与入口文件是相同的，只是少了依赖而已。
刚刚使用./node_modules/.bin/webpack打包，未免繁琐，这里可以通过在package.json中对scripts添加配置的方式，设置快捷命令。
{
"name": "webpackTest",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^5.38.1",
"webpack-cli": "^4.7.0"
}
}
rm -rf dist // 删除之前的打包文件
npm run build // 打包文件 生成与刚刚相同的文件
三 webpack基础用法
3.1 核心概念了解
入口 - entry
刚刚的配置文件中见过，用于指定打包文件入口。
单入口情况下为字符串，多入口情况下为key-value对象。
刚刚的示例为单入口文件。
出口 - Output
刚刚的配置文件中见过，用于指定编译后的文件输出。
// 单入口 单出口
module.exports = {
entry: './src/index.js', // 入口
output: {
// 出口
path: path.join(__dirname, 'dist'),
filename: 'bundle.js'
}
};
// 多入口 多出口
module.exports = {
entry: {
app: './src/app.js',
search: './src/search.js'
}
output: {
// 出口
path: path.join(__dirname, 'dist'),
filename: '[name].js'
}
};
可以看到，对于多入口出口配置，output中内容没有太大改变，其实是使用占位符[name]来实现文件动态命名的，打包后的dist目录中，有着对应入口文件的n个出口文件，名称与entry中的key值一致。
上面的配置文件中，打包结果为dist中出现两个文件，分别为app.js和search.js。
加载 - loaders
webpack原生支持js和json，通过loaders做其他文件类型的转换，如vue等，将其他文件类型转化为有效的模块，添加到依赖图中。
本身是一个函数，接受源文件作为参数，返回转换的结果。
常见loaders:
| babel-loader | 转换ES6.ES7等 |
|---|---|
| css-loader | 支持.css文件的加载和解析 |
| less-loader | 将less文件转换为css |
| ts-loader | 将TS转换成JS |
| file-loader | 进行图片 字体等的打包 |
| raw-loader | 将文件以字符串的形式导入 |
| thread-loader | 多进程打包JS和CSS |
用法
module.exports = {
module: {
rules: [
{
test:/\.txt$/,use:'raw-loader'} // 匹配规则 loader名称
]
}
}
插件 - Plugins
插件，增强功能。作用于整个构建过程。
常用插件
用法
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html'})
// 创建html文件去承载输出的bundle
]
}
环境 - Mode
指定当前的构建环境是：production development none
默认为 production。
通过对mode的不同设置，可以使用webpack不同内置函数。
3.2 基础解析-loaders使用
ES6 与 JSX
使用babel-loader完成。
npm i @babel/core @babel/preset-env babel-loader -D
在src同级目录下创建babel配置文件.babelrc，书写配置。
{
"presets": [
"@babel/preset-env"
]
}
修改webpack配置文件。
rules: [
{
test:/.js$/,
use: 'babel-loader'
}
]
配置完成后查看效果。
rm -rf dist
npm run build
此时已经解析成功了。
那如果是React语法如何解析呢。
安装babel-react。
npm i react react-dom @babel/preset-react -D
修改babel配置文件.babelrc。
{
"presets": [
"@babel/preset-env",
"@babel/preset-react"
]
}
书写一个简单的react-js文件，文件的含义是将一个模板放置到一个DOM节点上。
npm run build 构建即可查看效果。
将输出的JS文件放置到一个新建的html文件中，文件中含有对应的节点，就可以成功插入了。
CSS解析
解析CSS使用css-loader,将css转换为commonjs对象，使用style-loader，将样式通过
首先在项目中安装两个依赖。
npm i style-loader css-loader -D
在项目中创建css文件，写入一些样式,并在刚刚的react的js文件中引入使用。
在webpack配置文件中rules中添加loader。
module: {
...
rules: [
{
test: /.css$/,
use: [
'style-loader',
'css-loader'
]
}
]
}
再编译，生成的js文件，放置在html中就有对应效果了。
但是这时候还是没有单独的css文件的，要将css文件分离出来，要使用插件extract-text-webpack-plugin。
也可以使用mini-css-extract-plugin，都是用来抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象
extract-text-webpack-plugin 4.0的beta版本才支持webpack4.x 或者使用mini-css-extract-plugin
extract-text-webpack-plugin 默认版本 在webpack3.x可用
npm install extract-text-webpack-plugin --save-dev
var Ex = require('extract-text-webpack-plugin');
// ...省略
module: {
loaders: [{
test: /\.css/,
loader: Ex.extract('style-loader', 'css-loader','less-loader') // 单独打包出CSS，这里配置注意下
}]
},
plugins: [
new Ex("[name].css")
]
如果我们想要一个加载器数组，我们必须使用use，如果它只是一个加载器，那么我们必须使用loader。
Less解析
安装less和less-loader依赖。
npm i less less-loader -D
将刚刚的css文件转换为less文件，之后在webpack中配置rules。
{
test: /.less$/,
use: [
'style-loader',
'css-loader',
'less-loader'
]
}
然后打包查看效果即可。
解析图片
使用file-loader处理文件。
在src目录下放置图片logo.png，并在项目中引入使用。
npm i file-loader -D
在webpack配置文件中配置使用。
{
test: /.(png|jpg|gif|jpeg)$/,
use: 'file-loader'
}
打包即可。
解析字体
与图片相同使用file-loader。
刚刚已经安装过依赖了，无需再安装，我们直接在css中引入和使用字体即可。
在webpack配置文件中添加配置。
{
test: /.(woff|woff2|eit|ttf|otf)$/,
use: 'file-loader'
}
然后打包编译即可。
四 webpack文件监听
文件监听是指在发现源码发生变化时，自动构建新的输出文件。
webpack开启监听模式，有两种方式。
- 启动webpack命令时添加–watch参数。
- webpack配置文件中添加watch:true。
首先我们使用第一种方式。
在package.json的scripts中添加配置watch。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch"
},
然后运行构建的时候，使用 npm run watch构建。
webpack会轮询判断文件的最后编辑时间是否变化，变化后会等待一段时间后执行。
刚刚说了第二种方式，也可在配置文件中配置。
webpack相关配置。
module.export = {
// 默认false 也就是不开启
watch: true,
// 只有开启监听模式时下面的设置才有效
watchOptions: {
// 忽略的文件 默认为空
ignored:/node_modules/,
// 监听后等待时候 默认300
aggregateTimeout:300,
// 轮询时间 默认1000
poll:1000
}
}
如此，当我在编辑了文件的时候，保存后webpack就会自动编译。
五 功能优化-plugins使用
5.1 webpack热更新
刚刚添加了自动构建功能，但是构建完成后需要我们手动刷新浏览器，浏览器的自动刷新在webpack中也有体现，就叫做热更新。
也就是webpack-dev-server。
安装该包依赖。
npm i webpack-dev-server -D
我们在在package.json的scripts中添加配置dev。
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack",
"watch": "webpack --watch",
"dev": "webpack-dev-server --open"
},
在webpack配置中引入并注册热更新插件，并进行配置。
// webpack.config.js
const webpack = require('webpack');
// webpack.config.js
plugins: [
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: './dist',
hot:true
}
热更新的内容不会保存到磁盘，而是放置在内存中。
这时可能会有一个报错：
Cannot find module 'webpack-cli/bin/config-yargs'
是因为webpack-cli的新版本对webpack-dev-server版本的不兼容，之后降低webpack-cli的版本为 "^3.3.12"。
npm i [email protected] -D 就ok了。
5.2 代码压缩
JS压缩
webpack已经内置了uglifyjs-webpack-plugin插件进行JS压缩。
CSS压缩
使用插件optimize-css-assets-webpack-plugin，同时使用cssnano。
安装依赖。
npm i optimize-css-assets-webpack-plugin
npm i cssnano -D
引用插件。
plugins: [
...,
new OptimizeCSSAssetsPlugin({
assetNameRegExp: /.css$/g,
cssProcessor: require('cssnano')
})
]
然后打包，打包成的就是压缩的css了。
html压缩
设置插件html-webpack-plugin，设置压缩参数。
在html中新建html模板。
在webpack配置文件中引入html-webpack-plugin。
import HtmlWebpackPlugin = require(html-webpack-plugin)
在配置文件中配置插件。
const HtmlWebpackPlugin = require('html-webpack-plugin');
const path = require('path');
module.exports = {
...
plugins: [new HtmlWebpackPlugin()],
};
上面是最简单用法，这将会生成一个包含以下内容的 dist/index.html 文件。
如果你有多个 webpack 入口，他们都会在已生成 HTML 文件中的