/*** 处理项目* 项目根目录创建一个 webpack.config.js 配置文件* 需要下载webpack和webpack-cli依赖（webpack@4.41.6 webpack-cli@3.3.11）*/const {resolve } = require('path') // reslove用来拼接绝对路径const HtmlWebpackPlugin = require('html-webpack-plugin')const {CleanWebpackPlugin } = require('clean-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const webpack = require('webpack')module.exports = {/*** 当输出文件名为 main.js 时* 下列对象中的第一项等价于 entry: './src/index.js'*/entry: {// 入口文件main: "./src/index.js",other: "./src/other.js"},output: {// 输出配置/*** 常用占位符* [name]：入口配置对象中的key* [hash] [chunkhash] [contenthash] * 对比三个 hash：* 1. 都是为了浏览器缓存* 2. hash：只要有代码发生变化，所有 bundle 文件都会发生变化* 3. contenthash：只有内容发生改变的文件，对应的 bundle 文件才会发生变化* 4. chunkhash：同一个 bundle 中有一个的文件发生改变，其他文件也会变化* 使用占位符可以获取entry对象中所有的key进行代替，多个key则输出多个文件* 在此处 filename: '[name].js' 等价于 filename: 'main.js'* 占位符可以搭配使用，下列输出为 main-xxxxxx，other-xxxxxx* :6 为保留多少位 hash 值*/filename: '[name]-[hash:6].js', // 输出文件名/*** 输出文件路径配置* __dirname nodeJs变量，代表当前文件目录的绝对路径，第二个参数为该路径下的目录*/path: resolve(__dirname, './dist')},module: {// 模块转换器|模块处理器，每一个 loader 都遵循单一功能原则rules: [ // 详细loader配置，不同文件必须配置不同loader处理，loader需要下载相应依赖{test: /\.css$/, // 匹配的文件/*** 使用哪些loader进行处理* 数组中loader执行顺序，从右到左 | 从下到上，依次执行*/use: [/*** 创建style标签，将js中的样式资源插入进去，添加到head中生效* 需要安装 style-loader 依赖（style-loader@1.1.3）*/'style-loader',/*** 将css文件变成commonJs模块加载到js中（序列化），里面内容是样式字符串* 需要安装 css-loader 依赖（css-loader@3.4.2）*/'css-loader']},{test: /\.less$/,use: [// 'style-loader', 该loader会将 css 放在文档的动态 style 标签里面MiniCssExtractPlugin.loader, // 该loader会将 css 单独抽离成一个文件'css-loader',/*** 项目根目录创建一个 postcss.config.js 配置文件* 需要安装 postcss-loader 和 postcss 依赖（postcss-loader@4.0.2 postcss@8.0.5）*/'postcss-loader',/*** 将less文件编译成css文件* 需要安装 less-loader 和 less 依赖（less-loader@5.0.0 less@3.11.1）*/ 'less-loader']},{/*** 处理 js* 需要安装 babel-loader、 @babel/core 和 @babel/preset-env 依赖* 可以将具体的options单独抽离成 .babelrc | babel.config.js 文件*/test: /\.js$/,use: 'babel-loader'},{// 处理图片资源，这种方式处理不了html中的img图片test: /\.(jpe?g|png|gif)$/,// 需要安装 url-loader 和 file-loader 依赖（url-loader@3.0.0 file-loader@5.0.2）user: {loader: 'url-loader', // file-loader 是 url-loader 的真子集options: {/*** 当图片大小小于8KB时，用base64处理* 优点：减少请求数量（减轻服务器压力）* 缺点：图片体积更大（文件请求速度更慢）*/limit: 8 * 1024, // 官方推荐 2 * 1024，即 2KB/*** 问题：因为 url-loader 默认使用 es6 模块化解析，而 html-loader 引入图片是 commonjs* 解析时会出问题：[object Module]* 解决：关闭 url-loader 的 es6 模块化，使用 commonjs 解析*/esModule: false,/*** 给图片进行重命名（打包后图片名过长）* [name]取文件原来的名字* [ext]取文件原来扩展名*/name: '[hash:10].[ext]',// 输出的目标文件夹（创建）outputPath: 'imgs'}},},{// 处理html文件中img图片资源（负责引入img，从而能被url-loader进行处理）test: /\.html$/,// 需要安装 html-loader 依赖（html-loader@0.5.5）loader: 'html-loader',},{/*** 打包其他资源（除了html/js/css等资源以外的资源，比如图标，字体）* 可以不用test去匹配，而用exclude排除*/exclude: /\.(css|less|jpg|png|gif|html|js)$/,loader: 'file-loader',options: {name: '[hash:10].[ext]',outputPath: 'media'}}]},resolveLoader: {// 帮助 webpack 查找或解析 loader 的字段modules: ["./nodex_modules", // 默认"./myLoaders" // 自定义]},devtool: "source-map", // 开启了源代码与打包后代码的关系映射，方便调试，如果不需要单独的map文件，而是将内容放在bundle文件中，可以加一个“inline-”前缀，不过这样做会增大bundle文件的体积plugins: [ // 插件，webpack 的功能扩展，构建到各自的生命周期中，所以没有执行顺序/*** 该插件默认会创建一个空的HTML，引入打包输出的所有资源（JS/CSS）* 需要安装 html-webpack-plugin 依赖（html-webpack-plugin@3.2.0）*/new HtmlWebpackPlugin({template: './src/index.html', // 输出文件内容参照的模板，并自动引入打包输出的所有资源（JS/CSS）filename: 'aifisher.html', // 输出文件名chunks: ['main'] // 指定引入的bundle}),new HtmlWebpackPlugin({template: './src/index.html',filename: 'aifisherOr.html',chunks: ['other']}),/*** 该插件会清理 dist 中的冗余文件* 需要安装 clean-webpack-plugin 依赖（clean-webpack-plugin@3.0.0）*/new CleanWebpackPlugin(),/*** 该插件会抽离 css* 需要安装 mini-css-extract-plugin 依赖（mini-css-extract-plugin @0.11.2）*/new MiniCssExtractPlugin({filename: "index.css", // 抽离出来的 css 文件名}),new webpack.HotModuleReplacementPlugin() // 热模块更新],/*** 开启该模式下需要的插件（自支持的），默认为 production* none 关闭一部分默认的自支持插件* development 开发环境* production 生产环境*/mode: 'development',/*** 开发服务器，用来自动化（自动编译，自动打开浏览器，自动刷新浏览器）* 启动devServerh指令为：npx webpack-dev-server，需要安装 webpack-dev-server 依赖（webpack-dev-server@3.10.3）* 该指令不同于webpack指令（会生成打包文件），它只会在内存中编译打包，不会有任何输出（不会生成打包文件）*/devServer: {contentBase: resolve(__dirname, 'build'),// 启动gzip压缩compress: true,// 端口号，默认 8080port: 3000,，// 自动打开默认浏览器open: true,// 代理，解决跨域proxy: {"api" : {target: "http://localhost:9092/"}},/*** 热模块替换（该功能不支持抽离出的css，对应的loader为 MiniCssExtractPlugin.loader）* 原理如下：* css文件变化后，浏览器不会自动刷新* 按照模块划分，每一个模块都有自己的id*/hot: true,hotOnly: true, // 即便 HMR 不生效，浏览器也不会自动刷新}};
