[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"$fs-XM-WPtOx_yePHjBI2eTKOr8H1li8SWfGnc349a4xU":3},{"code":4,"message":5,"data":6},200,"成功",{"id":7,"createdAt":8,"title":9,"content":10,"summary":11,"image":12,"uid":13,"user":14,"categoryId":21,"category":22,"subCategoryId":24,"subCategory":25,"comments":27,"status":17,"reason":28,"notice":28,"visitCount":29,"commentCount":30,"keywords":31},33,"2024-01-29T14:58:41.433Z","webpack的概念，每一个配置的作用以及具体的操作实践","# 一、webpack概念\n## 1.1 webpack 是什么    \nwebpack 是一种前端资源构建工具，一个静态模块打包器(module bundler)。\n在 webpack 看来, 前端的所有资源文件(js/json/css/img/less/...)都会作为模块处理。\n它将根据模块的依赖关系进行静态分析，打包生成对应的静态资源(bundle)。\n![webpack打包全图](https://image.xinwei.ltd/11706539329583.png)\n\n## 1.2 webpack 五个核心概念\n### 1.2.1 Entry        \n入口(Entry)指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。 \n\n### 1.2.2 Output\n输出(Output)指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。\n\n### 1.2.3 Loader             \nLoader 让 webpack 能够去处理那些非 JavaScript 文件(webpack 自身只理解JavaScript)  \n\n### 1.2.4 Plugins\n插件(Plugins)可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量等。\n\n### 1.2.5 Mode               \n模式(Mode)指示 webpack 使用相应模式的配置。\n![打包模式](https://image.xinwei.ltd/21706539462160.png)\n\n# 二、webpack配置\n## 2.1 初始化配置\n1. 初始化 package.json输入指令:                    \n```terminal\nnpm init\n```\n2. 下载并安装 webpack输入指令:\n```terminal\n//【全局安装】\nnpm install webpack webpack-cli -g\n//【本地安装\nnpm install webpack webpack-cli -D\n```\n## 2.2 编译打包应用\n1. 创建文件\n2. 运行指令\n开发环境指令:\n```terminal\nwebpack src/js/index.js -o build/js/built.js --mode=development\n```\n功能: webpack 能够编译打包 js 和 json 文件，并且能将 es6 的模块化语法转换成浏览器能识别的语法。 \n\n生产环境指令:\n```terminal\nwebpack src/js/index.js -o build/js/built.js --mode=production\n```\n功能:在开发配置功能上多一个功能，压缩代码。\n\n3. 结论\nwebpack 能够编译打包 js 和 json 文件。\n能将 es6 的模块化语法转换成浏览器能识别的语法。\n能压缩代码。\n\n4. 问题\n不能编译打包 css、img 等文件。\n不能将 js 的 es6 基本语法转化为 es5 以下语法。\n\n# 三、webpack 开发环境的基本配置\n## 3.1 创建配置文件\n1. 创建文件 webpack.config.js\n2. 配置内容如下\n```js\nconst { resolve } = require('path'); // node 内置核心模块，用来处理路径问题。                                    \nmodule.exports = {\n  entry: './src/js/index.js', // 入口文件\n  output: { // 输出配置\n  filename: './built.js',\n  path: resolve(__dirname, 'build/js')\n  },                        \n  mode: 'development' //开发环境\n};        \n```\n3. 运行指令\n```terminal\nwebpack\n```\n\n## 3.2 打包样式资源\n1.创建文件\n![](https://image.xinwei.ltd/31706539813801.png)\n2. 下载安装 loader 包\n```terminal\nnpm i css-loader style-loader less-loader less -D   \n```\n3. 修改配置文件\n```js\n// resolve 用来拼接绝对路径的方法\nconst { resolve } = require('path');                        \nmodule.exports = {\n// webpack 配置// 入口起点\nentry: './src/index.js',\n// 输出                        \noutput: {\n    // 输出文件名\n    filename: 'built.js',\n    // 输出路径// __dirname nodejs 的变量，代表当前文件的目录绝对路径\n    path: resolve(__dirname, 'build')                                                                        \n},                        \n// loader 的配置\nmodule: {                        \n    rules: [// 详细 loader 配置// 不同文件必须配置不同 loader 处理\n    {                        \n    // 匹配哪些文件\n    test: /\\.css$/,\n    // 使用哪些 loader 进行处理\n    use: [                        \n    // use 数组中 loader 执行顺序:从右到左，从下到上 依次执行\n    // 创建 style 标签，将 js 中的样式资源插入进行，添加到 head 中生效\n    'style-loader',\n    // 将 css 文件变成 commonjs 模块加载 js 中，里面内容是样式字符串\n    'css-loader'                        \n    ]\n    },                        \n        {\n            test: /\\.less$/,\n            use: [                    \n    'style-loader',\n    'css-loader',\n    // 将 less 文件编译成 css 文件// 需要下载 less-loader 和 less\n    'less-loader'                        \n    ]\n    }                        \n    ]\n},                        \n// plugins 的配置\nplugins: [                        \n// 详细 plugins 的配置\n],                        \n// 模式\nmode: 'development', // 开发模式// mode: 'production'                        \n}                                                        \n```\n4. 运行指令\n```terminal\nwebpack\n```\n\n## 3.3 打包 HTML 资源\n1. 创建文件\n![](https://image.xinwei.ltd/41706539904725.png)\n2. 下载安装 plugin 包\n```terminal\nnpm install --save-dev html-webpack-plugin\n```\n3. 修改配置文件\n```js\n                                                                        \nconst { resolve } = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');                        \nmodule.exports = {\n  entry: './src/index.js',\n  output: {                        \n    filename: 'built.js',                        \n    path: resolve(__dirname, 'build')\n  },                    \n  module: {\n    rules: [                        \n    // loader 的配置\n    ]                        \n  },\n  plugins: [                        \n// plugins 的配置\n// html-webpack-plugin\n// 功能:默认会创建一个空的 HTML，自动引入打包输出的所有资源(JS/CSS)\n// 需求:需要有结构的 HTML 文件\nnew HtmlWebpackPlugin({                        \n// 复制 './src/index.html' 文件，并自动引入打包输出的所有资源(JS/CSS)                        \n      template: './src/index.html'\n    })                    \n],                        \n  mode: 'development'\n};                                                        \n```\n4.运行指令: \n```terminal\nwebpack\n```\n\n## 3.4 打包图片资源    \n1.创建文件    \n![](https://image.xinwei.ltd/51706540000340.png)\n\n2.下载安装 loader 包\n```terminal\nnpm install --save-dev html-loader url-loader file-loader\n```\n3.修改配置文件\n```js\n                                                                    const { resolve } = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');                        \nmodule.exports = {\n  entry: './src/index.js',\n  output: {                        \n    filename: 'built.js',                    \n    path: resolve(__dirname, 'build')\n  },                        \n  module: {\n    rules: [                    \n{test: /\\.less$/,// 要使用多个 loader 处理用 use\nuse: ['style-loader', 'css-loader', 'less-loader']                        \n},{                                                                                                \n// 问题:默认处理不了 html 中 img 图片\n// 处理图片资源\ntest: /\\.(jpg|png|gif)$/,\n// 使用一个 loader                        \n// 下载 url-loader file-loader\nloader: 'url-loader',\noptions: {\n                                                                        \n// 图片大小小于8kb，就会被base64处理\n// 优点: 减少请求数量(减轻服务器压力)\n// 缺点:图片体积会更大(文件请求速度更慢)\nlimit: 8 * 1024,\n// 问题:因为url-loader默认使用es6模块化解析，而html-loader引入图片是commonjs\n// 解析时会出问题:[object Module]\n// 解决:关闭 url-loader 的 es6 模块化，使用 commonjs 解析\nesModule: false,\n// 给图片进行重命名\n// [hash:10]取图片的 hash 的前 10 位\n// [ext]取文件原来扩展名\nname: '[hash:10].[ext]'                        \n}},                        \n{\ntest: /\\.html$/,// 处理 html 文件的 img 图片(负责引入 img，从而能被 url-loader 进行处理)\nloader: 'html-loader'                        \n}]                        \n},\nplugins: [                        \n    new HtmlWebpackPlugin({\n      template: './src/index.html'                    \n})],                        \n  mode: 'development'\n};                      \n```\n4. 运行指令: webpack\n\n## 3.5 打包其他资源    \n1. 创建文件\n![](https://image.xinwei.ltd/61706540088957.png)\n2. 修改配置文件\n```js\n                                                                        \nconst { resolve } = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');                        \nmodule.exports = {\n  entry: './src/index.js',\n  output: {                        \n    filename: 'built.js',                        \n    path: resolve(__dirname, 'build')\n  },                        \n  module: {\n    rules: [                        \n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader']                        \n},                        \n// 打包其他资源(除了html/js/css资源以外的资源)\n{                        \n// 排除 css/js/html 资源\nexclude: /\\.(css|js|html|less)$/,\nloader: 'file-loader',\noptions: {                        \n          name: '[hash:10].[ext]'\n        }                        \n}]                        \n},\nplugins: [                        \n    new HtmlWebpackPlugin({\n      template: './src/index.html'                        \n    })                                                                            \n],                        \n  mode: 'development'\n}; \n```\n4. 运行指令: webpack\n\n## 3.6 devserver\n1. 创建文件\n![](https://image.xinwei.ltd/71706540144948.png)\n2. 修改配置文件\n```js\n                                                                        \nconst { resolve } = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');                        \nmodule.exports = {\n  entry: './src/index.js',\n  output: {                        \n    filename: 'built.js',                        \n    path: resolve(__dirname, 'build')\n  },                        \n  module: {\n    rules: [                        \n      {\n        test: /\\.css$/,\n        use: ['style-loader', 'css-loader']                        \n        },                        \n// 打包其他资源(除了html/js/css资源以外的资源)\n{                        \n// 排除 css/js/html 资源\nexclude: /\\.(css|js|html|less)$/,                                                                        loader: 'file-loader',\n        options: {                        \n          name: '[hash:10].[ext]'\n        }                        \n}]                        \n},\nplugins: [                        \n    new HtmlWebpackPlugin({\n      template: './src/index.html'                        \n    })\n],                        \nmode: 'development',\ndevServer: {                        \n// 项目构建后路径\ncontentBase: resolve(__dirname, 'build'),\n// 启动 gzip 压缩\ncompress: true,\n// 端口号\nport: 3000,\n// 自动打开浏览器\nopen: true                        \n}}; \n```\n4. 运行指令:\n```terminal\nnpx webpack-dev-server\n```\n\n## 3.7 开发环境配置  \n1.创建文件    \n![](https://image.xinwei.ltd/81706540210677.png)\n\n2. 修改配置文件\n```js\n                                                                        const { resolve } = require('path');\nconst HtmlWebpackPlugin = require('html-webpack-plugin');                                                                        \nmodule.exports = {\n  entry: './src/js/index.js',\n  output: {                        \n    filename: 'js/built.js',\n    path: resolve(__dirname, 'build')\n  },                        \n  module: {\n    rules: [                        \n// loader 的配置\n{                        \n// 处理 less 资源\ntest: /\\.less$/,\nuse: ['style-loader', 'css-loader', 'less-loader']                        \n},{\n// 处理css资源\ntest: /\\.css$/,\nuse: ['style-loader', 'css-loader']                        \n},{\n// 处理图片资源\ntest: /\\.(jpg|png|gif)$/,\nloader: 'url-loader',\noptions: {                        \nlimit: 8 * 1024,\nname: '[hash:10].[ext]',\n// 关闭es6模块化\nesModule: false,\noutputPath: 'imgs'                                                                                                \n}},                        \n{\n// 处理html中img资源\ntest: /\\.html$/,\nloader: 'html-loader'                            \n},\n{                                                                                                                                                                                                                                                                                                                                                                // 处理其他资源\nexclude: /\\.(html|js|css|less|jpg|png|gif)/,\nloader: 'file-loader',\noptions: {                                                                        \nname: '[hash:10].[ext]',\noutputPath: 'media'\n  }                        \n}\n]                        \n},\nplugins: [                        \n// plugins 的配置new HtmlWebpackPlugin({                        \n      template: './src/index.html'\n    })                        \n  ],\n  mode: 'development',\n  devServer: {                        \n    contentBase: resolve(__dirname, 'build'),\n    compress: true,\n    port: 3000,\n    open: true                        \n}};   \n```\n3. 运行指令:\n```terminal\nnpx webpack-dev-server\n```\n暂时写到这里吧。","介绍webpack的概念、基本配置及每一项配置的含义和作用，然后是具体的操作步骤和演示。","https://image.xinwei.ltd/11706539329583.png",499668042977349,{"phone":15,"userId":13,"nickName":16,"vipType":17,"avatar":18,"sign":19,"createdAt":20},"13121171998","全栈老韩",1,"https://image.xinwei.ltd/images/IMG_5430.JPG","全栈工程师，擅长iOS App开发、前端（vue、react、nuxt、小程序&Taro）开发、Flutter、React Native、后端（midwayjs、golang、express、koa）开发、docker容器、seo优化等。","2024-01-01T16:14:30.305Z",2,{"id":21,"name":23},"IT技术",32,{"id":24,"name":26,"parentId":21},"前端",[],"",31,0,"vue,webpack,webpack概念"]