1.DevServer
当我们使用webpack指令对资源进行打包后，若后续有修改或者新增、删除一些资源或代码，将要重新进行打包才获得最新的代码打包，从而可以在浏览器看到最新的效果。但这样做往往过于麻烦，devServer可以帮助我们解决这个问题，实现在不手动重新打包的情况下，自动打包（构建），实现“热部署”。
1.1 安装devServer
npm i webpack-dev-server -D
1.2 配置webpack配置文件
在webpack.config.js中定义一个devServer对象：
devServer:{
contentBase:resolve(__dirname,'build'),
// 启动gzip压缩
compress:true,
// 端口号
port:3000,
// 自动打开浏览器
open: true
}
开发服务器 devServer：用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）
特点：只会在内存中编译打包，不会有任何输出（实际并不会编译打包，也就是不会生成build目录，当把devServer关闭之后，其所占用的内存空间被释放）
启动devServer指令为：npx webpack serve
2.开发环境配置
2.1 基础开发环境配置
webpack.config.js
// 开发环境配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/index.js',
output:{
filename:'built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
// Loader的配置
{
// 处理scss资源
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},
{
// 处理css资源
test:/\.css$/,
use:['style-loader','css-loader']
},
{
// 处理图片资源
test:/\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
limit:8*1024,
name:'[hash:10].[ext]',
esModule:false
}
},
{
// 处理html中img资源
test:/\.html$/,
loader:'html-loader'
},
{
// 处理其他资源
exclude:/\.(html|js|scss|jpg|png|gif)/,
loader:'file-loader',
options:{
name:'[hash:10].[ext]'
}
},
]
},
plugins:[
// 处理html资源
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
devServer:{
contentBase:resolve(__dirname,'build'),
compress:true,
port:3000,
open:true
},
mode:'development'
}
./src/index.js
// 引入iconfont样式文件
// import './iconfont.css';
require('!style-loader!css-loader!./iconfont.css');
// 引入页面样式
// import './index.css'
require('!style-loader!css-loader!./index.css');
function add(x,y){
return x+y;
}
console.log(add(1,2));
./src/index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1>开发环境配置</h1>
<span class="iconfont icon-daohang"></span>
<span class="iconfont icon-tupian"></span>
<span class="iconfont icon-biaoqian"></span>
<span class="iconfont icon-shuaxin"></span>
<div class="box1"></div>
<div class="box2"></div>
<div class="box3"></div>
<img src="douyin.png">
</body>
</html>
目录结构：
2.2 优化
以上的方式src目录过于混乱，现整理优化如下：
我们只需要修改webpack.config.js配置，即可将不同的资源输出到不同的目录下：
- 对于js资源：直接在
output中指定，例如：filename:'js/built.js' - 对于图片资源：在其对应的
roles对象的options里面添加outputPath，例如outputPath:'media' - 对于css资源：css资源不会输出，而是会整合到js中（一般为built.js）
- 对于其他资源：同图片资源
完整版配置：
// 开发环境配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry:'./src/js/index.js',
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
// Loader的配置
{
// 处理scss资源
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},
{
// 处理css资源
test:/\.css$/,
use:['style-loader','css-loader']
},
{
// 处理图片资源
test:/\.(jpg|png|gif)$/,
loader:'url-loader',
options:{
limit:8*1024,
name:'[hash:10].[ext]',
esModule:false,
outputPath:'img'
}
},
{
// 处理html中img资源
test:/\.html$/,
loader:'html-loader'
},
{
// 处理其他资源
exclude:/\.(html|js|scss|jpg|png|gif)/,
loader:'file-loader',
options:{
name:'[hash:10].[ext]',
outputPath:'media'
}
},
]
},
plugins:[
// 处理html资源
new HtmlWebpackPlugin({
template:'./src/index.html'
})
],
devServer:{
contentBase:resolve(__dirname,'build'),
compress:true,
port:3000,
open:true
},
mode:'development'
}
打包输出后的build文件夹：
3.构建环境配置（生产环境）
3.1 提取css成单独文件
// 开发环境配置
const { resolve } = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
entry:'./src/js/index.js',
output:{
filename:'js/built.js',
path:resolve(__dirname,'build')
},
module:{
rules:[
// Loader的配置
{
// 处理css资源
test:/\.css$/,
use:[
//'style-loader',
MiniCssExtractPlugin.loader,//这个loader取代style-loader，作用：提取js中的css成单独文件
'css-loader'
]
}
]
},
plugins:[
// 处理html资源
new HtmlWebpackPlugin({
template:'./src/index.html'
}),
new MiniCssExtractPlugin({
// 对输出的文件进行重命名
filename:'css/built.css'
})
],
mode:'development'
}
3.2 css兼容性处理
安装
我们使用postcss来对css进行兼容性处理，在webpack中使用postcss，我们使用postcss-loader和一个插件postcss-preset-env：
npm i postcss-loader postcss-preset-env -D
修改配置
webpack.config.js
/*
css兼容性处理：postcss --> postcss-loader postcss-preset-env
帮postcss找到package.json中browserslist里面的配置，通过配置加载指定的css兼容性样式
*/
// 第一种：使用loader的默认配置
'postcss-loader'
package.json中添加browserslist字段：
"browserslist":{
"development":[
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production":[
">0.2%",
"not dead",
"not op_mini all"
]
}
注意：broswerslist默认以生产环境模式运行，若要切换至开发环境，则需要配置nodejs环境变量——process.env.NODE_ENV = 'development';
修改postcss配置：在webpack.config.js同级目录下新建postcss.config.js
module.exports = {
plugins:[
require('postcss-preset-env')
]
}
3.3 压缩css
使用插件optimize-css-assets-webpack-plugin：
安装：npm i optimize-css-assets-webpack-plugin -D
引入：const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
使用：new OptimizeCssAssetsWebpackPlugin()
3.4 js语法检查
使用eslint对js进行语法检查。
在下面的例子在，我们使用airbnb代码风格进行检查，需要安装三个包：eslint、eslint-config-airbnb-base、eslint-plugin-import以及eslint-loader
安装：npm i eslint eslint-loader eslint-config-airbnb-base eslint-plugin-import -D
loader配置：
{
/*
语法检查：eslint eslint-loader
注意：只检查自己写的源代码，第三方库是不用检查的
设置检查规则：package.json
使用airbnb --> eslint eslint-config-airbnb-base eslint-plugin-import
*/
test:/\.js$/,
exclude:/node_modules/,//一定要排除node_modules
loader:'eslint-loader',
options:{
// 自动修复
fix:true
}
}
package.json配置（也可以使用单独文件进行片配置，具体参考官方文档）：
"eslintConfig": {
"extends": "airbnb-base"
}
忽略检查console语句：
function add(x, y) {
return x + y;
}
// 下一行eslint所有规则都失效（下一行不进行eslint检查）
// eslint-disable-next-line
console.log(add(2, 5));
3.5 js兼容性处理eslint
最基本的兼容性处理
使用babel进行js兼容性处理：babel-loader @babel/preset-env @babel/core
安装：npm i babel-loader @babel/preset-env @babel/core -D
配置：
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
// 预设：指示babel做怎样的兼容性处理
presets:['@babel/preset-env']
}
}
基本的js兼容性问题 --> @babel/preset-env
问题：只能转换基本语法，如promise不能转换
最完整的兼容性处理
全部js兼容性处理 --> @babel/polyfill
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
往需要进行兼容性处理的js文件中引入：
import '@babel/polyfill'
按需处理兼容性
需要做兼容性处理的就做：按需加载 --> core-js
npm i core-js -D
注意：使用core-js就不能使用polyfill了
{
test:/\.js$/,
exclude:/node_modules/,
loader:'babel-loader',
options:{
// 预设：指示babel做怎样的兼容性处理
presets:[
[
'@babel/preset-env',
{
// 按需加载
useBuiltIns:'usage',
// 指定core-js版本
corejs:{
version:3
},
// 指定兼容性做到哪个版本的浏览器
targets:{
chrome:'60',
firefox:'60',
ie:'9',
safari:'10',
edge:'17'
}
}
]
]
}
}
3.7 压缩js代码
只需要将mode切换为生产环境，就可以启用js压缩（生产环境会自动压缩js代码）
3.8 压缩Html
webpack.config.js
plugins:[
// 处理html资源
new HtmlWebpackPlugin({
template:'./src/index.html',
// 压缩html代码
minify:{
// 移除空格
collapseWhitespace:true,
// 移除注释
removeComments:true
}
})
]
扫一扫
1061
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
