webpack简介
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
image-20210116120049531.png
webpack五个核心概念
Entry(入口)
webpack以哪个文件为入口开始打包，分析构建内部依赖图。
OutPut（输出）
打包后的bundles输出到哪里，以及如何命名。
Loader
处理非js文件（webpack本身只能处理js文件）
Plugins(插件)
赋予一些更强劲的功能。
Mode
主要指定webpack响应模式的配置：
| 选项 | 描述 | 特点 |
|---|---|---|
| development | 开发模式 | |
| production | 生产（线上）模式 |
webpack配置
//webpack.config.js
const { resolve } = require('path')
module.exports = {
entry:"./src/index.js",
output:{
//输出文件名
filename:'build.js',
//输出路径一般为绝对路径
//__dirname是nodejs的变量，代表当前文件的绝对路径
path:resolve(__dirname,'build')
},
//loader的配置
module:{
rules:[
]
},
//plugins的配置
plugins：[
],
mode:'development',
//mode:'production'
}
开发环境要做的事
打包样式资源
要用到loader。 下载--使用
css处理
npm i css-loader,style-loader
使用：
module.exports = {
...
//loader的配置
module:{
rules:[
{
//处理哪些文件
test:/\.css$/,
//使用哪些loader进行处理
use:[
//use顺序是从右到左（从下到上）
//创建style标签，将js中的样式资源插入到head中
'style-loader',
//将css样式编程commonjs模块加载到js中，里面内容是字符串
'css-loader'
]
}
]
},
...
}
处理流程：
-
先从入口文件开始打包，如果遇到引用文件，则将其引入。
-
每次引入的文件先经过loader配置进行过滤：
2.1 如果匹配到了test中的资源，则用use中的loader进行处理，处理顺序从右往左。
2.2 先用css-loader进行处理，将css文件写入js;
2.3 然后通过style-loader将js中的css字符串写进head中。
less处理
npm i less,less-loader
module.exports = {
...
//loader的配置
module:{
rules:[
{
test:/\.less$/,
use:[
'style-loader',
'css-loader',
//将less编译成css
'less-loader'
]
}
]
},
...
}
语义和css一样。
打包HTML资源
要用到plugins:下载--引入--使用:
npm i html-webpack-plugin
//引入
const HtmlWebPackPlugin = require('html-webpack-plugin')
module.exports = {
...
plugins:[
//默认会创建一个空的html，自动引入打包输出的所有资源
new HtmlWebPackPlugin({
//复制这个index.html文件，并自动引入打包输出的所有资源
template: './index.html',
})
],
}
打包图片资源
npm i url-loader file-loader # 处理图片
npm i html-loader # 引入HTML中的图片
module.exports = {
...
//loader的配置
module:{
rules:[
{
test:/\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
//图片小于8kb，就会被base64处理
limit:8*1024，
//命名为hash值前10位+后缀
name:'[hash:10].[ext]'
}
},{
test:/\.html$/,
//处理html中的img图片的引入
loader:'html-loader'
}
]
},
...
}
其他资源
特点：无需做任何处理，原样打包过去就行。
rules:[
{
//排除
exclude:/\.(css|js|html)$/,
loader:'file-loader'
}
]
开发服务器（自动编译，自动刷新）
npm i webpack-dev-server -D
module.exports = {
...
//在内存中编译打包，不会有输出
//指令为npx webpack-dev-server
devServe:{
//要运行的代码目录
contentBase:resolve(__dirname,'dist'),
//压缩
compress:true,
port:3000,
//自动打开浏览器
open:true
}
}
文件分类
项目中的文件是有分类的，比如js、css、img资源等。所以要想输出的资源也分门别类的放好，所以要加outputPath属性。
js 更改filename
output:{
filename:'js/main.js',
path:resolve(__dirname,'dist')
},
其他的用outputPath
在options中添加outputPath
{
test:/\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
//图片小于8kb，就会被base64处理
limit:8*1024,
name:'[hash:10].[ext]',
outputPath:'res/imgs'
}
},{
//排除
exclude:/\.(css|js|html|less|jpg|png|gif)$/,
loader:'file-loader',
options:{
name:'[hash:10].[ext]',
outputPath:'res/media'
}
}
css文件不会有输出，因为css会被写入到js中去。
以上内容合并起来就是一个简单的webpack开发环境的配置。具体可以参考：https://gist.github.com/caoyangim/cb49b34bcf0dcf1d9ac9d3fdcc765480。
配置完成之后运行指令有两条，一个输出最终资源，一个直接展示成果：
webpack 和 npx webpack serve
生产（线上）环境要做的事
提取css成单独文件
mini-css-extract-plugin:会生成单独的css文件。
css兼容性处理
postcss-loader：生成的css文件中会自动处理兼容性问题。
css压缩
optimize-css-assets-webpack-plugin
语法检查
eslint-loader eslint
检查规则在package.json中设置：这里用airbnb规则，用eslint-config-airbnb。
npm i eslint-loader eslint eslint-config-airbnb
//package.json中：
"eslintConfig":{
"extends":"airbnb-base"
}
//webpack.config.jsz中
module:{
rules:[
{
test:/\.js$/,
exclude:/node_modules/,
loader:'eslint-loader',
options:{
//自动修复
fix:true
}
}
]
}
js兼容性
babel-loader兼容es6语法到低版本浏览器
js压缩
mode:production 生产环境会自动压缩js
html压缩
Html-webpack-plugin
new HtmlWebpackPlugin({
template:"./src/index.html",
minify:{
//移除空格
collapseWhitespate:true,
//移除注释
removeComments:true
}
})
网友评论