webpack基本使用（基础配置）

---

概要理解

vue或者react 通常用webpack作为打包工具，打包成浏览器识别的html、css、js -------简单理解webpack做为一个工厂。

1. 需要告诉工厂先从那个入口(entry)开始去处理代码（通常是项目的main.js入口文件）
2. 在所有的资源都间接或者直接被man,js引入之后，使用加载器(loaders) 将不同的原材料（less 、图片、css）转成javascript能理解的文件
3. 当工厂还需要做一些特殊的处理(检查文件、代码压缩、图区css到单独的文件)的操作，这就是用来做特殊处理的工具(plugins)
4. 那都处理好之后就需要输出了吧(output), webpack就将模块打包成一个或者多个文件，这些文件最终是浏览器运行的代码包

一、使用示例

首先先去webpack官方网站，包含了各种loader和plugins

1.引入库

npm install less less-loader --save-dev //处理less
npm install --save-dev css-loader //处理css
npm install --save-dev style-loader //处理style
npm install stylus stylus-loader --save-dev //处理stylus
npm i thread-loader -D
…

2.创建config/webpack.dev.js 测试环境

//创建config/webpack.dev.js 测试环境//处理路径问题
const path = require("path");
//使用ESLintPlugin 来做文件检查(常用作团队开发 规范代码作用）
const ESLintPlugin = require("eslint-webpack-plugin"); 
//在打包之后的dist文件中 生成一个html根目录文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
const os = require("os");
const threads = os.cpus().length; // 检查cpu核数  多进程打包//工厂
module.exports = {// 入口entry: "./src/main.js", // 相对路径// 输出output: {// 所有文件的输出路径// 开发模式没有输出path: undefined,//开发模式中 devserver会重新运行刷新// 入口文件打包输出文件名 filename: "static/js/[name].js",// 给打包输出的其他文件命名chunkFilename: "static/js/[name].chunk.js",// 图片、字体等通过type:asset处理资源命名方式assetModuleFilename: "static/media/[hash:10][ext][query]",},// 加载器module: {rules: [// loader的配置{// 每个文件只能被其中一个loader配置处理//这样处理的好处 如果检测到是css 那么就不会往下走了，提高打包效率oneOf: [{test: /\.css$/, // 只检测.css文件use: [// 执行顺序：从右到左（从下到上）"style-loader", // 将js中css通过创建style标签添加html文件中生效"css-loader", // 将css资源编译成commonjs的模块到js中],},{test: /\.less$/,// loader: 'xxx', // 只能使用1个loaderuse: [// 使用多个loader"style-loader","css-loader","less-loader", // 将less编译成css文件],},{test: /\.s[ac]ss$/,use: ["style-loader","css-loader","sass-loader", // 将sass编译成css文件],},{test: /\.styl$/,use: ["style-loader","css-loader","stylus-loader", // 将stylus编译成css文件],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图片转base64// 优点：减少请求数量（降低服务器压力）  缺点：体积会更大maxSize: 10 * 1024, // 10kb},},//generator: {// 输出图片名称// [hash:10] hash值取前10位//filename: "static/images/[hash:10][ext][query]",//},},{test: /\.(ttf|woff2?|map3|map4|avi)$/,type: "asset/resource",// generator: {// 输出名称// filename: "static/media/[hash:10][ext][query]",//},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules下的文件，其他文件都处理use: [{loader: "thread-loader", // 开启多进程options: {works: threads, // 进程数量},},{loader: "babel-loader",options: {// presets: ["@babel/preset-env"],cacheDirectory: true, // 开启babel缓存cacheCompression: false, // 关闭缓存文件压缩plugins: ["@babel/plugin-transform-runtime"], // 减少代码体积},},],},],},],},// 插件plugins: [// plugin的配置new ESLintPlugin({// 检测哪些文件context: path.resolve(__dirname, "../src"),exclude: "node_modules", // 默认值cache: true, //  开启缓存 意思就是说 每次打包 都要进行语句检查，那么缓存之前的，只检查修改的文件，提高性能cacheLocation: path.resolve(__dirname,"../node_modules/.cache/eslintcache"),threads, // 开启多进程和设置进程数量}),new HtmlWebpackPlugin({// 模板：以public/index.html文件创建新的html文件// 新的html文件特点：1. 结构和原来一致 2. 自动引入打包输出的资源template: path.resolve(__dirname, "../public/index.html"),}),],// 开发服务器: 不会输出资源，在内存中编译打包的devServer: {host: "localhost", // 启动服务器域名port: "3000", // 启动服务器端口号open: true, // 是否自动打开浏览器hot: true, // 开启HMR（默认值 意思是不会全部更新 哪里修改更新哪里 热更新除了js文件},optimization: {// 开发模式下不需要压缩// 代码分割配置splitChunks: {chunks: "all",// 其他都用默认值},},// 模式mode: "development",devtool: "cheap-module-source-map",
};

3.创建config/webpack.prod.js 正式环境

//创建config/webpack.prod.js 正式环境//处理路径问题
const path = require("path");
//使用ESLintPlugin 来做文件检查(常用作团队开发 规范代码作用）
const ESLintPlugin = require("eslint-webpack-plugin"); 
//在打包之后的dist文件中 生成一个html根目录文件
const HtmlWebpackPlugin = require("html-webpack-plugin");
//将打包的css 处理成单独的css文件
const MiniCssExtractPlugin = require("mini-css-extract-plugin");
//将抽离出来的css 进行压缩
const CssMinimizerPlugin = require("css-minimizer-webpack-plugin");
const os = require("os");
const threads = os.cpus().length; // cpu核数 开启多进程打包
//压缩js 
const TerserWebpackPlugin = require("terser-webpack-plugin");
//压缩图片
const ImageMinimizerPlugin = require("image-minimizer-webpack-plugin");
//预加载 浏览器空余时间 加载其他模块内容 提高性能
const PreloadWebpackPlugin = require("@vue/preload-webpack-plugin");
//断网了，但是页面还是会展示出来，离线缓存
const WorkboxPlugin = require("workbox-webpack-plugin");// 用来获取处理样式的loader
function getStyleLoader(pre) {return [MiniCssExtractPlugin.loader, // 提取css成单独文件"css-loader", // 将css资源编译成commonjs的模块到js中{loader: "postcss-loader",options: {postcssOptions: {plugins: ["postcss-preset-env", // 能解决大多数样式兼容性问题],},},},pre,].filter(Boolean);
}module.exports = {// 入口entry: "./src/main.js", // 相对路径// 输出output: {// 所有文件的输出路径// __dirname nodejs的变量，代表当前文件的文件夹目录path: path.resolve(__dirname, "../dist"), // 绝对路径// 入口文件打包输出文件名filename: "static/js/[name].[contenthash:10].js",// 给打包输出的其他文件命名chunkFilename: "static/js/[name].chunk.[contenthash:10].js",// 图片、字体等通过type:asset处理资源命名方式assetModuleFilename: "static/media/[hash:10][ext][query]",// 自动清空上次打包的内容// 原理：在打包前，将path整个目录内容清空，再进行打包clean: true,},// 加载器module: {rules: [// loader的配置{//这样处理的好处 如果检测到是css 那么就不会往下走了，提高打包效率oneOf: [{test: /\.css$/, // 只检测.css文件use: getStyleLoader(), // 执行顺序：从右到左（从下到上）},{test: /\.less$/,// loader: 'xxx', // 只能使用1个loaderuse: getStyleLoader("less-loader"),},{test: /\.s[ac]ss$/,use: getStyleLoader("sass-loader"),},{test: /\.styl$/,use: getStyleLoader("stylus-loader"),},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: "asset",parser: {dataUrlCondition: {// 小于10kb的图片转base64// 优点：减少请求数量  缺点：体积会更大maxSize: 10 * 1024, // 10kb},},// generator: {// 输出图片名称// [hash:10] hash值取前10位// filename: "static/images/[hash:10][ext][query]",//},},{	//字体图标 其他资源文件 处理test: /\.(ttf|woff2?|map3|map4|avi)$/,type: "asset/resource",//通过output统一输出//generator: {// 输出名称//filename: "static/media/[hash:10][ext][query]",//},},{	// 排除node_modules下的文件，将其他的js文件都做处理 //（因为浏览器虽然识别js文件，但是一些es6新语法// 比如箭头函数、解构赋值依然没办法识别）所以使用babel转译代码test: /\.js$/,exclude: /node_modules/,use: [{loader: "thread-loader", // 开启多进程options: {works: threads, // 进程数量},},{loader: "babel-loader",options: {// presets: ["@babel/preset-env"],cacheDirectory: true, // 开启babel缓存cacheCompression: false, // 关闭缓存文件压缩plugins: ["@babel/plugin-transform-runtime"], // 减少打包代码体积},},],},],},],},// 插件plugins: [// plugin的配置new ESLintPlugin({// 检测哪些文件 (检查src下面所有的文件)context: path.resolve(__dirname, "../src"),exclude: "node_modules", // 默认值(除了node_modules)cache: true, // 开启缓存 意思就是说 每次打包 都要进行语句检查，那么缓存之前的，只检查修改的文件，提高性能cacheLocation: path.resolve(__dirname, "../node_modules/.cache/eslintcache"), //缓存的地址threads, // 开启多进程和设置进程数量}),new HtmlWebpackPlugin({// 模板：以public/index.html文件创建新的html文件// 新的html文件特点：1. 结构和原来一致 2. 自动引入打包输出的资源//会在dist文件下创建一个一样index.html 并且以link标签方式，引入了output出口文件main.js文件template: path.resolve(__dirname, "../public/index.html"),}),//在插件中 创建MiniCssExtractPlugin(将css文件抽出，并放到指定的目录下)//打包后 会以link标签方式，在index.html，引入了main.css文件//new MiniCssExtractPlugin({//filename: "static/css/main.css",//}),//打包后 拆分为不同的css文件new MiniCssExtractPlugin({filename: "static/css/[name].[contenthash:10].css",chunkFilename: "static/css/[name].chunk.[contenthash:10].css",}),// 将打包后css压缩//new CssMinimizerPlugin(),// 打包后js压缩// new TerserWebpackPlugin({// parallel: threads, // 开启多进程和设置进程数量//}),// 预获取/预加载模块 浏览器空闲时候 提前加载模块 提高加载性能new PreloadWebpackPlugin({// rel: "preload",// as: "script",rel: "prefetch",}),// 意思 假如断网了，但是页面还是会展示出来，离线缓存new WorkboxPlugin.GenerateSW({// 这些选项帮助快速启用 ServiceWorkers// 不允许遗留任何“旧的” ServiceWorkersclientsClaim: true,skipWaiting: true,}),],//将js css 图片等 打包后的资源 进行压缩optimization: {// 压缩的操作minimizer: [// 压缩cssnew CssMinimizerPlugin(),// 压缩jsnew TerserWebpackPlugin({parallel: threads, // 开启多进程和设置进程数量}),// 压缩图片new ImageMinimizerPlugin({minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [["gifsicle", { interlaced: true }],["jpegtran", { progressive: true }],["optipng", { optimizationLevel: 5 }],["svgo",{plugins: ["preset-default","prefixIds",{name: "sortAttrs",params: {xmlnsOrder: "alphabetical",},},],},],],},},}),],// 代码分割配置splitChunks: {chunks: "all",// 其他都用默认值},runtimeChunk: {name: (entrypoint) => `runtime~${entrypoint.name}.js`,},},// 模式mode: "production",devtool: "source-map",
};

3.创建eslintrc.js

//根目录下 eslintrc.js  需要在webpack.prod.js做相应配置 
//在这个文件下 来自定义语法规范
module.exports = {// 继承 Eslint 规则extends: ["eslint:recommended"],env: {node: true, // 启用node中全局变量browser: true, // 启用浏览器中全局变量},parserOptions: {ecmaVersion: 6, // es6sourceType: "module", // es module},rules: {"no-var": 2, // 不能使用 var 定义变量},plugins: ["import"], // 解决动态导入语法报错
};

4.创建babel.config.js

//根目录下 babel.config.js  需要在webpack.prod.js做相应配置 
//（因为浏览器虽然识别js文件，但是一些es6新语法
// 比如箭头函数、解构赋值依然没办法识别）所以使用babel转译代码
// 配置智能预设（根据你所支持的浏览器或运行环境（如 Node.js）的版本，自动决定需要哪些 Babel 插件来转换代码）
module.exports = {// 智能预设：能够编译ES6语法presets: [["@babel/preset-env",{useBuiltIns: "usage", // 按需加载自动引入corejs: 3, //识别es6+新语法 补丁的作用 解决兼容性问题},],],
};

5.package.json

{"name": "web-pack-code","version": "1.0.0","description": "",//测试环境下 输出文件"main": "./src/main.js","scripts": {//启动dev命令 令devserver重新刷新项目 //devserver 实际会打包，但是打包的会存储在内存中，不会写入到磁盘    中，让保存修改文件时，触发devserver会重新更新，并将结果存储到内存中。"start": "npm run dev",//这里测试环境入口 就是配置的webpack.dev.js"dev": "webpack serve --config ./config/webpack.dev.js",// 打包 使用配置的正式环境 打包成一个或者多个文件组合成的dist"build": "webpack --config ./config/webpack.prod.js"},

5.main.js

// 完整引入
// import 'core-js'
// 按需加载 识别es6+新语法 补丁的作用 解决兼容性问题
// import "core-js/es/promise";if (module.hot) {// 判断是否支持热模块替换功能module.hot.accept("./js/count");module.hot.accept("./js/sum");
}//离线缓存
if ("serviceWorker" in navigator) {window.addEventListener("load", () => {navigator.serviceWorker.register("/service-worker.js").then((registration) => {console.log("SW registered: ", registration);}).catch((registrationError) => {console.log("SW registration failed: ", registrationError);});});
}

总结

`未完 继续更新，有错误请留言 会及时改正