webpack 之 一个简单的基本生产环境配置
// 用来拼接绝对路径的方法
const {resolve} = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin')
// 代码复用loader
const commonCssLoader = [
// 创建 style 标签，将js中的样式资源插入进行，添加到 head 中生效
// 'style-loader',
// 这个 loader 取代 style-loader 。作用：提取js中的css成单独文件
MiniCssExtractPlugin.loader,
// 将css文件变成commonjs 模块加载js中， 里面内容是样式字符串
'css-loader'
]
module.exports = {
// webpack 配置
// 入口起点
entry : './src/index.js',
// 输出
output : {
// 输出文件名
filename : 'js/built.js',
// 输出路径
path : resolve(__dirname, 'dist')
},
// loader 配置
module : {
rules : [
{
test : /\.css$/, // 匹配哪些文件
//使用哪些 loader 进行处理
use: [
// use 数组中的 loader 执行顺序：从右到左，从下到上依次执行
...commonCssLoader
]
},
{
test : /\.less$/,
use: [
...commonCssLoader,
'less-loader'
]
},
/*
正常来讲，一个文件只能被一个loader 处理。
当一个文件被多个loader 处理，那么一定要指定loader执行的先后顺序
先执行eslint 再执行babel
*/
/*
语法检查：eslint-loader eslint
注意：只检查自己写的源代码，第三方的库是不用检查的
设置检查规则：
package.json 中的 eslintConfig 中的设置
"eslintConfig": {
"extends": "airbnb-base"
}
airbnb 规则
1. eslint eslint-config-airbnb-base eslint-plugin-import （without React plugins）
2. eslint eslint-plugin-import, eslint-plugin-react, eslint-plugin-react-hooks, and eslint-plugin-jsx-a11y （including ECMAScript 6+ and React）
*/
{
test : /\.js$/,
exclude : /node_modules/,
loader: 'eslint-loader',
// 优先执行
enforce: 'pre',
options: {
// 自动修复 eslint 的错误
fix: true
}
},
/*
js 兼容性处理：babel-loader @babel/core @babel/preset-env
1. 基本js兼容性处理 --> @babel/preset-env
问题：只能转换基本语法，如Promise不能转换
2. 全部js兼容性处理 --> @babel/polyfill 使用时直接在js文件里面引入：import '@babel/polyfill'
问题：我只要解决部分兼容性问题，但是将所有兼容性代码全部引入，体积太大了
3. 需要做兼容性处理的就做：按需加载 --> core-js
*/
{
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'
}
}
]
]
}
},
{
// 问题：默认处理不了 html 中 img 图片
// 处理图片资源
test : /\.(jpg | png | gif)$/,
// 使用一个 loader， 可以不要use数组，可以直接指定
// 除了要下载 url-loader 还要下载 file-loader
loader : 'url-loader',
options : {
// 图片大小小于 8kb ， 就会被base64 处理
// 优点：减少请求数量（减轻服务器压力）
// 缺点：图片体积会更大（文件请求速度更慢）
limit : 8 * 1024,
// 问题：因为url-loader 默认使用es6模块化解析，而html-loader引入图片是commonjs
// 解析是会出现问题：[object Module]
// 解决：关闭 url-loader 的es6模块化，使用commonjs解析
esModule : false,
// 给图片进行重命名
// [hash:10]取图片的hash的前10位
// [ext] 取文件原来拓展名
name : '[hash:10].[ext]'
}
},
{
test : /\.html$/,
// 处理 html 文件的img图片（负责引入img，从而能被url-loader进行处理）
loader : 'html-loader'
},
{
exclude: /\.(js | css | less | html | jpg | png | gif)/,
loader: 'file-loader',
options: {
outputPath: 'media'
}
}
]
},
// plugins 的配置
plugins : [
// 详细 plugins 的配置
// html-webpack-plugin
// 功能：默认会创建一个空的html文件，自动引入打包输出的所有资源（js/css）
new HtmlWebpackPlugin({
// 增加一个配置
// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源（js/css）
template : './src/index.html',
// 压缩html资源
minify: {
collapseWhitespace: true, //去空格
removeComments: true // 去注释
}
}),
new MiniCssExtractPlugin({
// 输出文件名
filename: 'css/bulit.css'
}),
// 压缩css
new OptimizeCssAssetsWebpackPlugin()
],
//模式
// mode : 'development', // 开发模式
mode : 'production' // 生产模式
}