Webpack参数注解
- Entry：入口，Webpack 执行构建的第一步将从 Entry 开始，可抽象成输入。
- Module：模块，在 Webpack 里一切皆模块，一个模块对应着一个文件。Webpack 会从配置的 Entry 开始递归找出所有依赖的模块。
- Chunk：代码块，一个 Chunk 由多个模块组合而成，用于代码合并与分割。
- Loader：模块转换器，用于把模块原内容按照需求转换成新内容。
- Plugin：扩展插件，在 Webpack 构建流程中的特定时机注入扩展逻辑来改变构建结果或做你想要的事情。
- Output：输出结果，在 Webpack 经过一系列处理并得出最终想要的代码后输出结果。
查找兼容包
例：根据 webpack 的版本安装兼容的 copy-webpack-plugin 包。其它包亦可按此方法寻找
- (1)、进入githhub官网，搜索copy-webpack-plugin
- (2)、点击第一个链接，通过tag选择不同版本，以v6.2.1版本为例，查看对应的package.json文件。一般适配
webpack的包都在webpack-contrib仓库下
- (3)、已知道该版本支持以3,4开头的webpack，满足自己主机的webpack版本号
webpack配置详细
查看
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin')
const CopyWebpackPlugin = require('copy-webpack-plugin');
// webpack4支持此插件的最新版本为1.3.0
const CssMinimizerWebpackPlugin = require('css-minimizer-webpack-plugin')
const UglifyJsWebpackPlugin = require('uglifyjs-webpack-plugin')
const CleanCSS = require('clean-css')
// 拆分为一一对应的多个css文件 webpack4已不在支持此插件
// const ExtractTextWebpackPlugin = require('extract-text-webpack-plugin')
// 将所有的css样式合并为一个css文件
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
function resolve (dir) {
return path.join(__dirname, '..', dir).replace(/\\/g, '/')
}
module.exports = {
// 开发模式
mode:'development',
// 开启映射行关系 如遇到报错情况，将展示未编译前代码报错的具体行数
devtool: 'source-map',
// 入口文件 Webpack 会从配置的 Entry 开始递归找出所有依赖的模块
entry: path.resolve(__dirname,'../src/main.js'),
output: {
// 打包后的文件名称
filename: '[name].[hash:8].js',
// 打包后的目录
path: path.resolve(__dirname,'../dist')
},
plugins:[
// 将webpack打包出来的js文件引入到html中
new HtmlWebpackPlugin({
template:path.resolve(__dirname,'../public/index.html')
}),
// 清理打包目录
new CleanWebpackPlugin(),
// 把css样式从js文件中提取到单独的css文件中，打包后的css文件会自动引入到html中
new MiniCssExtractPlugin({
filename: "[name].[hash].css",
chunkFilename: "[id].css",
}),
// 保留指定目录下的文件不被编译压缩
// 按如下写法会报错为：
// 报错为：Invalid options object. Copy Plugin has been initialized using an options object that does not match the API schema
// 由于在适应webpack4的copy-webpack-plugin插件中写法发生了变化导致
// 可参考官网https://webpack.js.org/plugins/copy-webpack-plugin/
// new CopyWebpackPlugin([{
// from: path.resolve(__dirname, './static'),
// to: 'static',
// ignore: ['.*']
// }]),
// 拷贝文件到指定目录
// 希望对静态资源进行一定处理（比如说代码压缩，图片压缩）之后再 copy ，则可以配置 transform 属性，加上对应的一些插件，进行相应操作
new CopyWebpackPlugin({
patterns: [
{
from: resolve('static/**/*.js'),
to: resolve('static'),
// transform (content, absoluteFrom) {
// let res = Uglify.minify(content.toString());
// return res.error ? content : res.code;
// },
// // 经过转换后的文件，输出路径和直接 copy 略有不同，转换后的路径公式：to + sourcePath
// // 例如, public/js/index.js 转换后的输出路径为 dist/public/js/index.js ，所以需要
// // 在这做一下路径转换，去掉不必要的目录
// transformPath(targetPath, absolutePath) {
// return targetPath.replace('static', '');
// },
},
// // 压缩 CSS
// {
// from: resolve('public/**/*.css'),
// to: resolve('dist'),
// transform (content, absoluteFrom) {
// return new CleanCSS({ level: 1 }).minify(content).styles;
// },
// transformPath(targetPath, absolutePath) {
// return targetPath.replace('public', '');
// },
// },
{ from: path.resolve(__dirname, '../static'), to: 'static', globOptions: { ignore: ['.js'] } }
]
}),
// 压缩js
// new UglifyJsWebpackPlugin()
// 压缩css
new CssMinimizerWebpackPlugin(),
],
module:{
rules:[
// css-loader仅提供了将css转换为字符串导出的能力，剩余的事情要交给其他loader或plugin来处理
// style-loader可以将css-loader转换后的代码进一步处理，将css-loader导出的字符串加入到页面的style元素中
// 解析后的css会混在main.js中，用浏览器打开html可查看
// style-loader要放在首位
{
test:/\.css$/,
use:[
// 如果使用了MiniCssExtractPlugin，不需要再配置style-loader，否则会报错Cannot read properties of undefined (reading 'locals')
// 'style-loader',
MiniCssExtractPlugin.loader,
'css-loader',
'postcss-loader'
] // 从右向左解析原则
},
{
test: /\.(jpe?g|png|gif)$/i, //图片文件
use: [
{
loader: 'url-loader',
options: {
// [object Module] 问题
esModule: false,
// (如果小于 10K ，则转为base64，否则返回一个url地址) 输出到编辑目录img下
limit: 10240,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
// 转换es6/7/8语法
{
test:/\.js$/,
use:{
loader:'babel-loader',
options:{
presets:['@babel/preset-env']
}
},
exclude: '/node_modules/'
}
]
}
}
/**
* 1、在html中引入图片无法打包
* (1)<%= require('../src/assets/avatar.jpg')%>
*/
webpack4依赖包
查看 package.json
{
"name": "max-webpack4",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack --config build/webpack.config.js"
},
"author": "",
"license": "ISC",
"devDependencies": {
"@babel/core": "^7.17.8",
"@babel/preset-env": "^7.16.11",
"autoprefixer": "^8.0.0",
"babel-loader": "^8.2.3",
"clean-css": "^5.2.4",
"clean-webpack-plugin": "^4.0.0",
"copy-webpack-plugin": "^6.2.1",
"css-loader": "^4.3.0",
"css-minimizer-webpack-plugin": "^1.3.0",
"extract-text-webpack-plugin": "^4.0.0-beta.0",
"file-loader": "^6.2.0",
"html-webpack-plugin": "^4.5.2",
"mini-css-extract-plugin": "^1.0.0",
"postcss-loader": "^4.0.4",
"style-loader": "^2.0.0",
"uglifyjs-webpack-plugin": "^2.2.0",
"url-loader": "^4.1.1",
"webpack": "^4.46.0",
"webpack-cli": "^4.9.2",
"webpack-merge": "^5.2.0"
},
"dependencies": {
"axios": "^0.26.1"
}
}