webpack-dev-server开发服务器 和 webpack中常用plugin和loader
webpack-dev-server：开发服务器
在开发阶段，我们希望把最终的代码和页面部署到服务器上来调试是否有bug，如果我们的代码不能实现热加载的话，那会对开发效率产生极大的影响，我们所有的时间，可能都浪费在打包、运行、调试过程了。
webpack-dev-server就是一个热加载的模拟服务器。
我们要使用webpack-dev-server，先要安装
npm install --D webpack-dev-server
我们通过执行webpack-dev-server命令，来运行服务器。webpack-dev-server命令几乎支持所有的webpack命令参数，如--config、-env等等，你可以把它当作webpack命令使用
webpack-dev-server --open
# --open 运行时打开浏览器
其实webpack-dev-server的运行原理非常简单：
- 内部执行webpack命令，传递命令参数
- 开启watch监听
- 注册hooks：注册一些钩子函数，用于将资源列表（aseets）保存起来和禁止webpack输出文件
- 用express开启一个服务器，监听某个端口（通过配置设置。默认80），当请求到达后，根据请求的路径，给予相应的资源内容
webpack-dev-server的配置。
具体配置查看官方文档：https://www.webpackjs.com/configuration/dev-server/
module.exports = {
mode:"development",
devServer:{
port:3000,
open:true,
proxy: {
'/api': {
target: 'http://localhost:8081',
changeOrigin: true //修改请求头中的host,origin
},
}
}
}
解释：
- port：配置监听端口
- open：是否自动打开浏览器
- proxy：配置代理，当我们访问的地址中带有
api路径，就会跳转到代理中的目标地址，常用于跨域访问，配合后台使用。
我整理了几个webpack进行项目开发时常用的插件和常用的loader。
webpack常用插件
具体的使用请查看官网：https://www.npmjs.com/
1、clean-webpack-plugin
clean-webpack-plugin：清除输出目录
npm install --save-dev clean-webpack-plugin
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = {
plugins: [
new CleanWebpackPlugin(),
]
}
2、html-webpack-plugin
html-webpack-plugin：生成html文件的插件
npm i --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
plugins: [
new HtmlWebpackPlugin({
template:"./public/index.html" //可以指定模板html，也可以使用默认的
}),
]
}
3、copy-webpack-plugin
copy-webpack-plugin：复制文件的插件，复制静态资源
npm install --save-dev copy-webpack-plugin
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
plugins: [
new CopyPlugin([
{ from: 'source', to: 'dest' },
{ from: 'other', to: 'public' },
]),
],
};
综合使用一下
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyPlugin = require('copy-webpack-plugin');
module.exports = {
output:{
filename:"[name].[hash:5].js"
},
plugins:[
new CleanWebpackPlugin(),
new HtmlWebpackPlugin({
//指定模板html文件
template:"./public/index.html"
}),
new CopyPlugin([
{from:"./assets",to:"./assets"}
]
)
]
}
4、bundle analyzer
bundle analyzer：对bundle进行分析，直观的显示各个bundle文件的大小，以达到优化性能的目的
npm i -D webpack-bundle-analyzer
const WebpackBundleAnalyzer = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
module.exports = {
mode: "production",
plugins: [
new WebpackBundleAnalyzer()
]
};
5、compression-webpack-plugin
compression-webpack-plugin：使用gzip方式对文件进行预压缩
npm i -D compression-webpack-plugin
const compressionWebpackPlugin = require("compression-webpack-plugin")
module.exports = {
mode: "production",
plugins: [
new compressionWebpackPlugin({
test: /\.(js)|(css)$/,
threshold: 10240, //超过多少字节进行压缩
minRatio: 0.8 //至少压缩到原来体积的0.8,才会进行压缩
})
]
};
webpack常用loader
1、file-loader
file-loader: 生成依赖的文件到输出目录，生成的文件会导出一个路径。采用export default "文件名"方式导出。
如果我们在某个js通过require导入图片，require无法对图片进行语法解析，打包时会报错，但是我们又要使用这个图片，那么我们就需要通过file-loader对图片进行处理。
/*----------假如我们在某个js中使用图片----------*/
const png = require("../assets/test.png").default //通过require导入图片，导出时用默认导出
let img = document.getElementsByTagName("img")[0]
img.src = png
/*----------webpack.config.js----------*/
module:{
rules:[
{
test:/\.(png)|(jpg)$/,
use:[{
loader:"file-loader",
options:{
name: '[name].[ext]',
}
}]
}
]
}
2、url-loader
url-loader：将依赖的文件转换为：导出一个base64格式的字符。export default "base64编码"
module:{
rules:[
{
test:/\.(png)|(jpg)$/,
use:[{
loader:"url-loader",
options:{
limit:100*1024, //如果设置了大小，超出改范围就会自动转交给file-loader进行处理
name: 'imgs/[name].[ext]',//设置file-loader的输出目录文件
}
}]
}
]
},
url-loader中引入了file-loader，当限制大小的时候，超出限制会自动使用file-loader进行处理。
3、css-loader
css-loader：将css代码转换为js代码。它的处理原理极其简单：将css文件的内容作为字符串导出。然后将css中的其他依赖作为require导入，以便webpack分析依赖
例如：我们的css代码是这样的
@import "./reset.css";
.red{
color:"#f40";
background:url("./bg.png")
}
经过css-loader处理以后，它会把代码转换为这样。具体转换过程可以去看源码（只是类似转换后的，有出入）
var import1 = require("./reset.css");
var import2 = require("./bg.png");
module.exports = `.red{
color:"#f40";
background:url("${import1}")
}`;
使用css-loader：
module:{
rules:[
{test:/\.css$/,use:"css-loader"}
]
}
4、style-loader
style-loader：因为css-loader仅提供了将css转换为字符串导出的能力，style-loader可以将css-loader转换后的代码进一步处理，将css-loader导出的字符串加入到页面的style元素中
例如：
.red{
color:"#f40";
}
经过css-loader转换后变成js代码：
module.exports = `.red{
color:"#f40";
}`
经过style-loader转换后变成：（非真实转换代码，只是模拟一下）
module.exports = `.red{
color:"#f40";
}`
var style = module.exports;
var styleElem = document.createElement("style");
styleElem.innerHTML = style;
document.head.appendChild(styleElem);
module.exports = {}
style-loader的使用：
module:{
rules:[
{
test:/\.css$/,
use:["style-loader","css-loader"]
}]
}
5、mini-css-extract-plugin
mini-css-extract-plugin：因为css-loader转换css代码后，交给style-loader进习性处理，sytle-loader是用一段js代码，将样式加到style文件中。而我们通常更需要的是生成一个css文件。于是就有了库mini-css-extract-plugin，这个库提供了一个plugin和一个loader：
- plugin：负责生成css文件
- loader：负责记录要生成的css文件的内容，同时导出开启css-module后的样式对象
const MiniCssExtractPlugin = require("mini-css-extract-plugin")
module.exports = {
module: {
rules: [
{
test: /\.css$/, use: [MiniCssExtractPlugin.loader, "css-loader?modules"]
}
]
},
plugins: [
new MiniCssExtractPlugin({
filename:"[name].[hash:5].css"
}) //负责生成css文件，name是chunk的name
]
}
6、cache-loader
cache-loader：可以将loader的解析结果保存下来，让后续的解析直接使用缓存的结果，当然这种方式会增加第一次构建时间，要将cache-loader放在最前面，虽然放在最前面，但是他可以决定让后续loader是否运行。
module.exports = {
module: {
rules: [
{
test: /\.js$/,
use: ['cache-loader', ...loaders]
},
],
},
};
webpack内置插件
所有的webpack内置插件都作为webpack的静态属性存在的，使用下面的方式即可创建一个插件对象
const webpack = require("webpack")
new webpack.插件名(options)
DefinePlugin：全局常量定义插件，使用该插件通常定义一些常量值。在源码中，我们可以直接使用插件中提供的常量，当webpack编译完成后，会自动替换为常量的值
const webpack = require("webpack")
module.export = {
plugins:[
new webpack.DefinePlugin({
PI: `Math.PI`, // PI = Math.PI
VERSION: `"1.0.0"`, // VERSION = "1.0.0"
})
]
}
BannerPlugin：它可以为每个chunk生成的文件头部添加一行注释，一般用于添加作者、公司、版权等信息
const webpack = require("webpack")
module.export = {
plugins:[
new webpack.BannerPlugin({
banner: `hash:[hash]
chunkhash:[chunkhash]
name:[name]
author:llk
corporation:xxx`
})
]
}
ProvidePlugin：自动加载模块，而不必到处 import 或 require 。我们可以在任意源码中直接使用$和_
const webpack = require("webpack")
module.export = {
plugins:[
new webpack.ProvidePlugin({
$: 'jquery',
_: 'lodash'
})
]
}