1、将css打包
webpack.config.js
// loader
module:{
rules: [
{
test: /\.css$/,
use: [
// 创建style标签,将js中样式资源插入添加到head中生效
'style-loader',
// 把css文件变成commonjs模板加载js中，里面是样式字符串
'css-loader'
]
}
]
},
2、解析less 或sass scss
{
test: /\.less$/,
use: [
// 创建style标签,将js中样式资源插入添加到head中生效
'style-loader',
// 把css文件变成commonjs模板加载js中，里面是样式字符串
'css-loader',
// 把 less编译成css
'less-lader'
]
}
3、清空上一次打包后的文件夹，并把打包后的资源引入到html中
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require("clean-webpack-plugin");
...
// plugins
plugins:[
// 先清空上一次打包后的文件夹
new CleanWebpackPlugin(),
// 创建一个空的html，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 模板
template: './index.html'
})
],
4、打包css图片资源
{
test: /\.(jpe?g|svg|png|gif)$/,
loader: 'url-loader',
options: {
// 图片小于8kb,就会被base64处理 （根据实际更换大小） 大于会被file-loader 直接处理复制过去
// 优点： 减小请求数量
// 缺点： 文件体积会变大（请求速度变慢）
limit: 8 * 1024，
// 给图片重命名
// [hash:10] 取图片hash前10位
// [ext]取文件原来扩展名
name: '[hash:10].[ext]'
}
}
5、处理html中img 图片
{
test: /\.html$/,
// 处理HTML文件中的img图片
loader: 'html-loader',
// 关闭es模块化解析，引入的图片方式为commonjs
options: {
// esModule: false,
},
}
6、打包其他资源（不做任何处理，比如字体文件等）
{
// 排除html/js/css/less资源
// exclude: /\.(html|css|js|less)$/,
// 或者用匹配字体
test: /\.(woff|woff2|svg|eot|ttf)\??.*$/,
loader: 'file-loader',
options:{
name: 'assets/fonts/[name].[ext]'
}
}
7、开发环境部分配置
devServer: {
// 运行代码的目录
contentBase: path.join(__dirname, 'dist'),
// 监视contenBase目录下的所有文件，一旦文件变化就会reload
watchContentBase: true,
watchOptions:{
// 当第一个文件更改，会在重新构建前增加延迟。这个选项允许 webpack 将这段时间内进行的任何其他更改都聚合到一次重新构建里。以毫秒为单位：
aggregateTimeout: 600,
// 忽略文件 或者global 模式 '**/node_modules', 或者多个global模式['**/files/**/*.js', '**/node_modules']
ignored: /node_modules/,
poll: 1000, // 每秒检查一次变动
},
// 开启gzip压缩
compress: true,
// 端口号
port: 9000,
// 自动打开
open: true,
// HRM
hot: true,
// 域名
host: 'localhost',
// 用于配置是否关闭用于 DNS 重绑定的 HTTP 请求的 HOST 检查。DevServer 默认只接受来自本地的请求，关闭后可以接受来自任何 HOST 的请求。
disableHostCheck: true,
// 关闭启动服务器日志信息
clientLogLevel: 'none',
// 除了一些基本启动信息以外，其他内容都不要显示
quiet: true,
// 关闭全屏提示错误
overlay: false,
// 回退:支持历史API。当使用 HTML5 History API 时, 所有的 404 请求都会响应 index.html 的内容
historyApiFallback: true,
// 指定打开浏览器时要浏览的页面
openPage: `index.html`,
//将运行进度输出到控制台
progress: true,
// 代理 --》解决开发环境跨域问题
proxy:{
// 一旦请求/api/xx的请求时，会把请求转发到服务器 http://xxxx:8080
'/api': {
target: 'http://xxxx:8080',
// 发送请求时重写路径 将 /api/xx ===> /xx
pathRewrite:{
'^/api': ''
}
}
}
},
8、单独提取css文件
module: {
rules: [
{
test: /\.css$/,
use: [
// 创建style标签,将js中样式资源插入添加到head中生效
// 'style-loader',
// 提取js中css为单独文件
MiniCssExtractPlugin.loader,
// 把css文件变成commonjs模板加载js中，里面是样式字符串
'css-loader'
]
},
]
},
plugins: [
new MiniCssExtractPlugin({
filename: 'css/[name].css'
})
]
9、css兼容问题
// 指定node 环境
process.env.NODE_ENV = 'development'
...
{
test: /\.css$/,
use: [
// 提取js中css为单独文件
MiniCssExtractPlugin.loader,
// 把css文件变成commonjs模板加载js中，里面是样式字符串
'css-loader',
/**
* css 兼容处理： postcss --> 需要下载 postcss-loader postcss-preset-env
* 要使用postcss-preset-env 需要去package.json中配置browserslist或者生成一个..browserslistrc
*/
{
loader: "postcss-loader",
options: {
postcssOptions: {
plugins: [
[
"postcss-preset-env"
],
],
},
}
}
]
},
.browserslistrc
# Browsers that we support
[production]
# 支持99.8%的浏览器
> 0.2%
# 不用兼容死的浏览器比如ie9
not dead
# op_mini浏览器不兼容
not op_mini all
[development]
last 1 chrome version
last 1 firefox version
package.json
"browserslist": {
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
],
"production": [
">0.2%",
"not dead",
"not op_mini all"
]
},
10、压缩css
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
plugins: [
// 直接调用插件就行
new OptimizeCssAssetsPlugin()
]
webpack 常用配置解析（一）
webpack 常用配置解析（二)
webpack 常用配置解析（三)
