webpack5区分生产环境打包文件
package.json
{
"name": "webpeck",
"version": "1.0.0",
"description": "",
"main": "./index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.15.0",
"@babel/preset-env": "^7.15.0",
"autoprefixer": "^10.3.1",
"babel-loader": "^8.2.2",
"core-js": "^3.16.2",
"css-loader": "^6.2.0",
"file-loader": "^6.2.0",
"html-loader": "^2.1.2",
"html-webpack-plugin": "^5.3.2",
"mini-css-extract-plugin": "^2.2.0",
"optimize-css-assets-webpack-plugin": "^6.0.1",
"postcss-loader": "^6.1.1",
"style-loader": "^3.2.1",
"url-loader": "^4.1.1",
"webpack": "^5.50.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.2"
},
"browserslist": [
"last 1 version",
"> 1%"
]
}
webpack.config.js
/*
webpack.config.js webpack的配置文件
作用：当运行webpack的指令时，会加载其中的配置
所有的构建工具都是基于nodejs运行的，模块化采用的是commenjs
*/
// resolve用来拼接绝对路径
const { resolve } = require('path');
// 引入html-webpack-plugin 作用：复制html文件
const htmlPlugin = require('html-webpack-plugin');
// 引入mini-css-extract-plugin 作用：将css文件从中提取出来
const miniCss = require('mini-css-extract-plugin');
// 引入optimize-css-assets-webpack-plugin 作用：用于压缩css
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
module.exports = (env,argv)=>{
const config = {
// 入口起点
// entry: "./src/js/index.js",
// 多入口打包：
entry: {
'index':'./src/js/index.js',
'about':'./src/js/about.js'
},
// 输出
output: {
// 输出文件名
filename: "js/[name].[contenthash:8].js",
// 输出路径 __dirname，nodejs的变量，代表当前的绝对路径
path: resolve(__dirname, "build")
},
// 优化策略：配置提取公共资源
optimization: {
splitChunks: {
chunks:'all'
}
},
// 启用source-map定位问题
devtool:'source-map',
// loader配置
module: {
// 在rules中配置详细的loader
rules: [
// 处理css文件
{
// 匹配文件名，文件名结尾为.css的文件
test: /\.css$/,
// 使用loader进行处理
use: [
// use数组中执行顺序，从右到左，从下到上 依次执行
// 创建一个style标签，将js中的样式插入到style标签中，再插入到head中
// 'style-loader',
// 不添加到页面的style中，单独提取css文件
miniCss.loader,
// 将css文件变成commenjs模块加载进js中，里面内容是样式字符串
'css-loader',
// 添加css前缀（为了浏览器兼容性）
'postcss-loader'
]
},
// 处理css中引入的图片资源
{
// 问题：处理不了html中的img图片
test: /\.(jpg|JPG|png|PNG|gif|GIF)$/,
// 使用loader：url-loader, file-loader
loader: 'url-loader',
options: {
// 图片大小如果小于8kb,就会被base64处理
// 优点：减轻服务器的压力
// 缺点：图片体积会变大，文件请求速度会变慢
limit: 8 * 1024,
// 问题：因为url-loader默认使用的是es6模块化解析，而html-loader引入图片使用的是commonjs
// 解析img引入的图片就会出现问题
// 所以用下面这行代码进行解决，关闭es6的模块化解析，使用commomjs解析
esModule: false,
// 打包后的图片名太长，所以我们可以给图片名重命名
// 取hash值的前十位，并使用原来的图片扩展名[ext]
name: '[hash:10].[ext]',
// 指定打包指向目录
outputPath: 'img/'
}
},
// 处理html中img引入的图片资源
{
test: /\.html$/,
// 处理html中的img引入的图片，引入后会被url-loader进行处理
// loader: 'html-loader',
loader: 'html-loader',
options: {
esModule: false,
}
},
// 处理其他资源
{
// 排除掉所需资源
exclude: /\.(css|html|js|jpg|JPG|png|PNG|gif|GIF)$/,
// 使用file-loader
loader: 'file-loader',
options: {
name: '[contenthash:10].[ext]',
outputPath: 'media'
},
},
// 配置babel
{
// 匹配
test: /\.m?js$/,
// 排除配置文件，不用转译
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
// 第二次构建时，会读取之前的缓存
cacheDirectory:true,
presets: [
[
'@babel/preset-env',
{
// 指定按需加载
useBuiltIns:"usage",
// 指定core-js版本
corejs:3,
targets: "defaults"
}
]
]
}
}
}
]
},
// plugins配置
plugins: [
// html-webpack-plugin
// 功能：默认会创建一个空的html文件，并且将打包的资源引入到html中
// 创建一个html的plugin对象
new htmlPlugin({
// 作用：复制目录下的html文件，并引入资源
template: './src/index.html',
// 指定要加载的打包js文件
chunks:['index'],
minify: {
// 清理空格和换行符
collapseWhitespace:true,
// 保持单行标签的尾部斜杠
keepClosingSlash:true,
// 去掉html注释
removeComments:true,
// 当值与默认值匹配时删除属性
removeRedundantAttributes:true,
// type="text/javascript"从script标签中删除。其他type属性值保持不变
removeScriptTypeAttributes:true,
// type="text/css"从style和link标记中删除。其他type属性值保持不变
removeStyleLinkTypeAttributes:true,
// doctype用简短的 (HTML5) doctype替换
useShortDoctype:true
}
}),
// 提取css文件的配置
new miniCss({
filename: 'css/[name].[contenthash:8].css'
}),
// 压缩css配置
new OptimizeCssAssetsPlugin()
],
// 打包环境
// mode: 'development',// 开发模式
mode:'production', // 生产模式
// 启动devServer指令：npx webpack-dev-server
devServer: {
// 打包目标文件目录
contentBase: resolve(__dirname, 'build'),
// 启动gzip压缩
compress: true,
// 端口号
port: 3000,
// 启动成功自动打开浏览器
open: true
}
}
// 判断是否是开发环境打包
if(env.development) {
config.mode = 'development',
config.plugins = [
// html-webpack-plugin
// 功能：默认会创建一个空的html文件，并且将打包的资源引入到html中
// 创建一个html的plugin对象
new htmlPlugin({
// 作用：复制目录下的html文件，并引入资源
template: './src/index.html',
// 指定要加载的打包js文件
chunks:['index']
}),
// 提取css文件的配置
new miniCss({
filename: 'css/[name].[contenthash:8].css'
})
]
}
// 返回配置
return config;
}
如需生产环境打包(会压缩文件)
webpack
如需开发环境打包(不会压缩文件)
webpack --env development
