包头建设网站,百度上搜不到做的网站,做问卷调查的网站,网站后台psd一、为什么需要webpack
1.为什么使用webpack ①传统的书写方式#xff0c;加载太多脚本会导致网络瓶颈#xff0c;如不小心改变JavaScript文件加载顺序#xff0c;项目会崩溃#xff0c;还会导致作用域问题、js文件太大无法做到按需加载、可读性和可维护性太低的问题。
②…一、为什么需要webpack
1.为什么使用webpack ①传统的书写方式加载太多脚本会导致网络瓶颈如不小心改变JavaScript文件加载顺序项目会崩溃还会导致作用域问题、js文件太大无法做到按需加载、可读性和可维护性太低的问题。
②当今JavaScript、css的语法规范不断更新但是浏览器的兼容性却不能同步的更新开发者可以通过 webpack 预处理器进行编译自由的使用 JS、CSS 等语言的新语法。
③Vue 脚手架vue-cli、React 脚手架create-react-app、Taro 脚手架taro-cli都是使用webpack开发者掌握 webpack后可以自由配置脚手架根据项目需要去调整 webpack 配置以提高项目性能。
④拥有依赖管理、动态打包、代码分离、按需加载、代码压缩、静态资源压缩、缓存等配置扩展性强插件机制完善开发者可自定义插件、loaderwebpack 社区庞大更新速度快轮子丰富 1.由于浏览器解析html的顺序是从上至下引入第三方库时便会存在先后顺序问题作用域是由于存在多个JS文件时window下有可能挂载多个相同或不同变量 →解决方案使用立即调用函数表达式 IIFE 来创建独立作用域 2.js文件过于庞大时无法做到按需加载如引用第三方工具库lodash等 →解决 ①依赖nodeJS实现使用commonJs的module.exports来抛出模块代码使用require来引入模块 ②不依赖nodeJS实现可以使用browserify、requireJS等打包工具实现 在没有各个 webpack 搭建的脚手架create-react-app、vue-cli 等等之前我们通过在 HTML5 文件里引入一个个 Javascript 文件来进行开发这就可能导致并行请求数量过多、存在重复代码等问题。而通过 webpack我们可以使用 import、require 来进行模块化开发。在 webpack 中一切皆模块js、css、图片、字体都是模块而且支持静态解析、按需打包、动态加载、代码分离等功能帮助我们优化代码提升性能。
2.什么是webpack
Webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析然后将这些模块按照指定的规则生成对应的静态资源。 Webpack是一个模块打包器。在Webpack中会将前端的所有资源文件js/json/css/img/less/...都作为模块处理。它将根据模块的依赖关系进行分析生成对应的资源
3.五个核心概念
【入口(entry)】指示 webpack 应该使用哪个模块来作为构建其内部依赖图的开始。【输出(output)】在哪里输出文件以及如何命名这些文件。【Loader】处理那些非 JavaScript 文件webpack 自身只能解析 JavaScript和json。【插件(plugins)】执行范围更广的任务从打包到优化都可以实现。【模式(mode)】有生产模式production和开发模式development
对loader的理解webpack 本身只能处理JS、JSON模块如果要加载其他类型的文件(模块)就需要使用对应的loader 。它本身是一个函数接受源文件作为参数返回转换的结果。loader 一般以 xxx-loader 的方式命名xxx 代表了这个 loader 要做的转换功能比如 css-loader。对plugins的理解插件可以完成一些loader不能完成的功能。
4.配置文件
webpack.config.js : 用于存储webpack配置信息。
二、webpack与竞品
Webpack 为处理资源管理和分割代码而生可以包含任何类型的文件。灵活插件 多。
Parcel 是 0 配置工具 用户一般无需再做其他配置即可开箱即用。
Rollup用标准化的格式es6来写代码通过减少死代码尽可能地缩小包体积。 一般只用来打包JS。 构建一个简单的应用并让它快速运行起来使用 Parcel。 构建一个类库只需要导入很少第三方库使用 Rollup。 构建一个复杂的应用需要集成很多第三方库需要代码分拆使用静态资源文件 还有 CommonJS 依赖使用 webpack。 Vite 将成 为 Vue 的现代标配。甚至最近新推出的 Petite Vue 从开发、编译、发布、Demo几 乎全都是使用 Vite 完成。Webpack、Vite 作为前端热门的工程化构建工具它们都有各自的适用场景。 三、安装webpack
1.本地安转
npm install --save-dev webpack# 或指定版本
npm install --save-dev webpackversion
如果你使用 webpack v4 版本并且想要在命令行中调用 webpack你还需要安装 CLI。
npm install --save-dev webpack-cli
对于大多数项目我们建议本地安装。这可以在引入重大更新(breaking change)版本时更容易分别升级项目。 通常会通过运行一个或多个 npm scripts 以在本地 node_modules 目录中查找安装的 webpack 来运行 webpack
scripts: {build: webpack --config webpack.config.js}
2.全局安装
npm install --global webpack
不推荐 全局安装 webpack。这会将你项目中的 webpack 锁定到指定版本并且在使用不同的 webpack 版本的项目中 可能会导致构建失败。 安装node.js https://nodejs.org/zh-cn/ 最新LTS版本验证node版本 node -v验证npm版本 npm -v可选执行 npm i webpack webpack -cli --global 全局安装webapck在当前文件目录下执行 webpack -v 验证版本npm init -y 初始化package配置文件npm install webpack webpack-cli --save-dev 本地安装webpack及webpack-cli 四、运行webpack 在终端中输入 webpack 回车会生成dist文件夹即打包后的文件 使用全局webpackwebpack --status detailed 查看详细打包信息使用全局webpacknpx webpack 使用当前目录webpack 进入项目目录运行webpack执行指令
npx webpack
生成了一个main.js文件
五、自定义webpack配置
实际上 webpack-cli 给我们提供了丰富的终端命令行指令可以通过npx webpack --help 查看帮助信息。
npx webpack --entry ./src/index.js --mode production 设置入口文件
可是命令行不方便也不直观而且还不利于保存配置的内容可以采取配置config的方式。因此webpack 还给我们提供了通过配置文件来自定义配置参数的能力。
可以在当前目录下新建webpack.config.js文件用commonJs写法抛出配置模块
const { resolve } require(path); //node内置核心模块用来设置路径。module.exports {//入口是指依赖关系图的开始从入口开始寻找依赖打包构建。webpack 允许一个或多个入口配置。entry: ./src/js/app.js, // 入口文件配置精简写法/*完整写法entry:{main:./src/js/app.js}*///输出则是用于配置 webpack 构建打包的出口如打包的位置打包的文件名等等。output: { //输出配置clean: true, //打包前清理 dist 文件夹在每次构建前清理 /dist文件夹这样只会生成用到的文件。filename: bundle.js,//输出文件名path: resolve(__dirname, ./dist)//输出文件路径(绝对路径),require的path为nodeJS自带__dirname可直接匹配当前目录},mode: development //开发环境(二选一) webpack编译模式区分生产测试环境 //mode: production //生产环境(二选一)// 文件监视改动自动产出bundle.jsdevtool: inline-source-map//精准定位代码行数便于查看。在开发模式下追踪代码watch: true //观察模式自动检测变化但需要手动刷新浏览器如果其中一个文件被更新代码将被重新编译所以不必再去手动运行整个构建。
};使用 webpack-dev-server
webpack-dev-server支持文件打包后的本地代码实时更新提高webpack开发效率。提供了一个基本的 web server并且具有 live reloading(实时重新加载) 功能。可以自动检测文件变化从而重新编译帮助我们自动实现浏览器的刷新。
先安装
npm install --save-dev webpack-dev-server 也可以通过npx webpack命令后缀添加--watch 实现编译时自动检测文件变化需要手动刷新浏览器 本地安装 npm install webpack-dev-server -D 修改配置文件告知 dev server从什么位置查找文件
module.exports{...devServer:{static:./dist},
}
以上配置告知 webpack-dev-server将 dist 目录下的文件作为 web 服务的根目录。
执行命令
npx webpack serve --open
执行 npx webpack --dev-server --watch也可以 npx webpack serve
webpack-dev-server 在编译之后不会写入到任何输出文件。而是将 bundle 文件保留在内存中然后将它们 serve 到 server 中就好像它们是挂载在 server 根路径上的真实文件一样。
六、自动引入资源
1.什么是插件
随着应用程 序增长如果继续手动管理就会变得困难起来。然而webpack在打包流程中产生的编译过程可以借助插件实现某些功能通过一些插件可以使这个过程更容易管控。
插件是 webpack 的核心功能。插件可以用于执行一些特定的任务包括打包优化资源管理注入环境变量等。Webpack自身也是构建于你在webpack 配置中用到的相同的插件系统之上。
想要使用一个插件你只需要 require() 它然后把它添加到 plugins 数组中。 多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而 多次使用同一个插件这时需要通过使用 new 操作符来创建一个插件实例。
2.使用html-webpack-plugin
本地安装
npm install html-webpack-plugin -D
config中添加配置:
const path require(path)
const HtmlWebpackPlugin require(html-webpack-plugin)module.exports{entry:./src/index.js,output:{// 打包前清理 dist 文件夹clean: true,filename:bundle.js,path:path.resolve(__dirname,./dist)},mode:development,devtool: inline-source-map ,//插件配置集合plugins:[new HtmlWebpackPlugin()],
}
new HtmlWebpackPlugin() 中也可以添加配置项 plugins:[...new HtmlWebpackPlugin({template:./index.html,//指向的htmlfilename:app.html,//被打包后的html文件名inject:body// js打包后的生成位置}),]
七、引入资源
1.Resource-发送单独文件并导出Url
修改webpack.config.js配置
const path require(path)const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {//...// 配置资源文件module: {rules: [{test: /\.png/,type: asset/resource}]},//...
} 在module中设置文件类型及资源类型output端中增加打包后的资源文件夹配置 output:{filename:bundle.js,path:path.resolve(__dirname,./dist),clean:true,assetModuleFilename:images/[contenthash][ext],},
2.inline-导出资源的Data Url
module:{rules:[...{test:/\.svg$/,type:asset/inline}]
} 实际展示出的文件的url为base64格式
3.source-导出资源的源代码
module:{rules:[...{test:/\.txt$/,type:asset/source}]
}
4.asset-通用资源类型-自动选择data url或源文件
module:{rules:[...{test:/\.jpg$/,type:asset,parser:{dataUrlCondition:{maxSize:4 * 1024 * 1024 //当图片大小大于4M时生成资源文件否则为base64 url}}}]
}
可以通过配置临界值实现自动切换资源格式更加灵活可控默认大小为8kb
八、管理资源
除了以上四个资源模块我们还可以通过webpack-loader引入其他类型的文件。webpack只能解析JS、JSON文件这是 webpack 开箱可用的自带能力。loader 让 webpack 能够去处理其他类型的文件并将它们转换为有效模块通过loader可以实现在js上加载css等其他文件。
在 webpack 的配置中loader 有两个属性
1. test 属性识别出哪些文件会被转换。2. use 属性定义出在进行转换时应该使用哪个 loader。 const path require(path);module.exports {output: {filename: my-first-webpack.bundle.js,},module: {rules: [{ test: /\.txt$/, use: raw-loader }],},};
//以上配置中对一个单独的 module 对象定义了 rules 属性里面包含两个必须属性
//test 和 use。这告诉 webpack 编译器(compiler) 如下信息
//“嘿webpack 编译器当你碰到「在 require()/import 语句中被解析为.txt 的路径」时
//在你对它打包之前先 use(使用) raw-loader 转换一下。
1.加载CSS
本地安装css-loader及style-loader npm install css-loader -D并在规则中添加css
module:{rules:[...{test:/\.css$/,use:[style-loader,css-loader]}]
}
应保证 loader 的先后顺序 style loader 在前而 css loader 在后。如果 不遵守此约定webpack 可能会抛出错误。
2.抽离和压缩CSS
在多数情况下我们也可以进行压缩CSS以便在生产环境中节省加载时间同时还可以将CSS文件抽离成一个单独的文件。
抽离
实现这个功能需要mini-css-extract-plugin这个插件来帮忙本插件会将 CSS 提取到单独的文件中为每个包含 CSS 的 JS 文件创建一个 CSS 文件并且支持 CSS 和 SourceMaps 的按需加载。
本地安装mini-css-extract-plugin : npm install mini-css-extract-plugin -D基于webpack5构建需要webpack5环境下才能正常使用和style-loader不同MiniCssExtractPlugin会生成link标签从而引入外部css
!DOCTYPE htmlhtml langenheadmeta charsetUTF-8meta http-equivX-UA-Compatible contentIEedgemeta nameviewport contentwidthdevice-width, initial scale1.0titleWebpack5学习指南/titlelink hrefmain.css relstylesheet/headbodyscript defer srcbundle.js/script/body/html
将 loader 与 plugin 添加到你的 webpack 配置文件中。通过require引入后在plugins里添加引用同时在原有css规则中替换掉style-loadernpx webpack打包后生效。
plugins:[new HtmlWebpackPlugin({template:./index.html,filename:app.html,inject:body}),new MiniCssExtractPlugin()
]
module:{rules:[...{test:/\.css$/,use:[MiniCssExtractPlugin.loader,css-loader]}]
}
在plugins里调用MiniCssExtractPlugin时也可以添加filename来自定义生成目录及文件名。
contenthash会随机生成字符串的文件名 plugins:[...new MiniCssExtractPlugin({filename:styles/[contenthash].css}),],
压缩
本地安装css-minimizer-webpack-plugin: npm install css-minimizer-webpack-plugin -D和其他插件不同需在optimization中添加配置并且mode要切换为production
//优化配置
optimization:{minimizer:[new CssMinimizerPlugin(),],
}
//生产模式
mode:production
3.加载images图像
假如现在我们正在下载 CSS但是像 background 和 icon 这样的图像要如何处理呢在 webpack 5 中可以使用内置的 Asset Modules可以将这些内容混入我们的系统中在 css文件里也可以直接引用文件修改style.css 和入口 index.js依赖于资源模块
module:{rules:[...{test:/\.png$/,type:asset/resource,generator:{filename:images/[contenthash][ext]}}]
}
打包后
import ./style.css
4.加载fonts字体
使用 Asset Modules 可以接收并加载任 何文件然后将其输出到构建目录。这就是说我们可以将它们用于任何类型的文 件也包括字体。
module:{rules:[...{test:/\.(woff|woff2|eot|ttf|otf)$/,type:asset/resource}]
}
在css中引用并创建字体图标库
font-face {font-family: iconfont;src: url(../icon/iconfont.ttf) format(truetype);
}
5.加载数据
可以加载的有用资源还有数据如 JSON 文件CSV、TSV 和 XML。类似于 NodeJSJSON 支持实际上是内置的也就是说 import Data from loader 和 ./data.json 默认将正常运行。
根据数据格式安装不同的loader模块比如要导入 CSV、TSV 和 XML可以使用csv-loader和xml-loader。本地安装 csv-loader xml-loader : npm install csv-loader xml-loader -D在项目中引入csv、xml等数据格式时会自动转化为对象、数组等JS数据格式
module:{rules:[...{test:/\.(csv|tsv)$/,use:csv-loader},{test:/\.xml$/,use:xml-loader}]
}
//现在你可以 import 这四种类型的数据(JSON, CSV, TSV, XML)中的任何一种
//所导入的 Data 变量将包含可直接使用的已解析 JSON
6.自定义JSON模块parser
通过使用自定义 parser 替代特定的webpack loader可以将任何toml、yaml或json5文件作为JSON导入。
本地安装 toml yaml json5 npm install toml yaml json5 -D
引入模块
const toml require(toml)
const yaml require(yaml)
const json5 require(json5)
添加规则
module:{rules:[...{test:/\.xml$/,use:xml-loader},{test:/\.toml$/,type:json,parser:{parse:toml.parse}},{test:/\.yaml$/,type:json,parser:{parse:yaml.parse}},{test:/\.json5$/,type:json,parser:{parse:json5.parse}}]
}
7.使用babel-loader
webpack 自身可以自动加载JS文件就像加载JSON文件一样无需任何 loader。但加载的JS文件会原样输出即使你的JS文件里包含ES6的代码也不会做任何转化。这时我们就需要Babel来帮忙。Babel 是一个 JavaScript 编译器可以将 ES6转化成ES5将js代码转化以提供兼容度支持。在Webpack里使用Babel需要使用babel-loader。
babel-loader: 在webpack里应用 babel 解析ES6的桥梁babel/core: babel核心模块babel/preset-env: babel预设一组 babel 插件的集合
本地安装 babel-loader babel/core babel/preset-env : npm install babel-loader babel/core babel/preset-env -D
在 webpack 配置中添加babel-loader到module中
module:{rules:[...{test:/\.js$/,exclude:/node_modules/,use:{loader: babel-loader,options:{presets:[babel/preset-env]}}}]
}
注意
需在exclude中排除node_modules包如需兼容async/await语法则还需要添加regeneratorRuntime模块。regeneratorRuntime是webpack打包生成的全局辅助函数由babel生成用于兼容async/await的语法。npm install --save babel/runtime【这个包中包含了regeneratorRuntime运行时需要】npm install --save-dev babel/plugin-transform-runtime【这个插件会在需要regeneratorRuntime的地方自动require导包编译时需要】
module:{rules:[...{test:/\.js$/,exclude:/node_modules/,use:{loader: babel-loader,options:{presets:[babel/preset-env],plugins:[[babel/plugin-transform-runtime]]}}}]
}
九、代码分离
代码分离是 webpack 中最引人注目的特性之一。此特性能够把代码分离到不同的 bundle 中然后可以按需加载或并行加载这些文件。项目中若存在多个入口文件时则需要代码分离若存在多个模块共用的代码时也需要分离代码来防止重复打包。
代码分离可以用于获取更小的 bundle以及控制资源加载优先级如果使用合理会极大影响加载时间。常用的代码分离方法有三种
入口起点使用 entry 配置手动地分离代码。防止重复使用 Entry dependencies 或者 SplitChunksPlugin 去重和分离 chunk。动态导入通过模块的内联函数调用来分离代码。
1.入口起点
module.exports {entry: {//将其他包命名在entry中index: ./src/index.js,another: ./src/another-module.js,},output: {//并在output输出端中直接配置[name]对应entry中的keyfilename: [name].bundle.js//...},//...}
执行npx webpack后便会提示相应包名被分别打包且都被引入 存在一些隐患
如果入口 chunk 之间包含一些重复的模块那些重复模块都会被引入到各个 bundle 中。这种方法不够灵活并且不能动态地将核心应用程序逻辑中的代码拆分出来。
2.防止重复
Entry dependencies
入口依赖当图中两个模块共有lodash时会抽离出来并取名为lodash。配置 dependOn option 选项这样可以在多个 chunk 之间共享模块 entry:{index:{import:./src/index.js,dependOn:shared},another:{import:./src/another-module.js,dependOn:shared},shared:lodashindex:./src/index.js,another:./src/another-module.js},
打包后多出的shared.budle.js即为定义中的模块此时lodash是共用的做到了模块的去重和分离 SplitChunksPlugin
可以将公共的依赖模块提取到已有的入口 chunk 中或者提取到一个新生成的 chunk。
配置时依旧可以采用独立命名 entry:{index:./src/index.js,another:./src/another-module.js},
在 optimization 优化配置项中添加 splitChunks optimization:{...splitChunks:{chunks:all}},
执行之后可以发现使用 optimization.splitChunks 配置选项之后index.bundle.js 和 another.bundle.js 中已经移除了重复的依赖模块。注意插件将 lodash分离到单独的chunk并且将其从main bundle 中移除减轻了大小。
3.动态导入
当涉及到动态代码拆分时webpack 提供了两个类似的技术。
第一种也是推荐选择的方式是使用符合ECMAScript提案的import()语法来实现动态导入且不影响其他模块抽离方式。 async-module.js 假设为功能模块 // async-module.js
function getComponent(){return import(lodash).then(({default:_}){const element document.createElement(div)element.innerHTML _.join([hello,webpack], )return element})
}getComponent().then((element){document.body.appendChild(element)
}) 在入口文件中导入 import ./async-module 第二种则是webpack的遗留功能使用 webpack 特定的 require.ensure。
4.懒加载
懒加载或按需加载是一种很好的优化网页或应用的方式。这种方式实际上是先把代码在一些逻辑断点处分离开然后在一些代码块中完成某些操作后立即引用或即将引用另外一些新的代码块。这样加快了应用的初始加载速度减轻了它的总体体积因为某些代码块可能永远不会被加载。
依旧通过import直接引入模块区别在于何时调用何时加载模块
const button document.createElement(button)button.textContent 点击执行加法运算button.addEventListener(click, () {import(/* webpackChunkName: math */ ./math.js).then(({ add
}) {console.log(add(4, 5))})
})document.body.appendChild(button)
加上注释 webpackChunkName:模块名 后可以定义打包后的模块名
import(/* webpackChunkName:math */./math.js)
第一次加载完页面 math.bundle.js不会加载当点击按钮后才加载 math.bundle.js文件。
5.预获取/预加载模块
在声明import时使用下面这些内置指令可以让webpack输出“resource hint资源提示”来告知浏览器
prefetch预获取将来某些导航下可能需要的资源 即在浏览器网络空闲时再获取资源preload预加载当前导航下可能需要资源和懒加载效果类似
prefetch
依旧在import引入时的注释中添加
const button document.createElement(button)
button.textContent 点击执行加法运算
button.addEventListener(click,(){import(/* webpackChunkName:math,webpackPrefetch:true */./math.js).then(({add}){console.log(add(4,5));})
})
document.body.appendChild(button)
加上注释 webpackPrefetch: true 后可以告诉 webpack 执行预获取。会生成link relprefetch hrefmain.js并追加到页面头部指示着浏览器在闲置时间预取 math.js 文件。 我们发现在还没有点击按钮时,math.bundle.js就已经下载下来了。同时在 app.html可以看到点击按钮会立即调用已经下载好的 math.bundle.js文件中的 add 方法。
preload
与 prefetch 指令相比preload 指令有许多不同之处preload chunk 会在父 chunk 加载时以并行方式开始加载。prefetch chunk 会在父 chunk 加载结束后开始加载。preload chunk 具有中等优先级并立即下载。prefetch chunk 在浏览器闲置时下载。preload chunk 会在父 chunk 中立即请求用于当下时刻。prefetch chunk 会用于未来的某个时刻。浏览器支持程度不同。
十、缓存
打包后的dist文件部署到服务器以后便能被浏览器客户端所访问因浏览器的解析特性会优先选择缓存资源我们要确保文件发生更新时浏览器能识别到所以需要对输出文件的文件名做处理。
1.输出文件的文件名
我们可以通过替换 output.filename 中的 substitutions 设置来定义输出文件的名称。webpack提供了一种使用 substitution 可替换模板字符串的方式通过带括号字符串来模板化文件名其中[contenthash] substitution 将根据资源内容创建出唯一的hash。当资源内容发生变化时 [contenthash] 也会发生变化。
module.exports {output: {filename: [name].[contenthash].js,},
}; 2.缓存第三方库
将第三方库 (library) (例如 lodash) 提取到单独的 vendor chunk 文件中是比较推荐的做法因为第三方库文件很少像本地源码那样频繁修改所以我们可以利用client的长效缓存机制命中缓存来消除请求并减少向server 获取资源同时保证client和server的代码一致。
在 optimization.splitChunks 添加cacheGroups 参数并构建 optimization:{...splitChunks:{...cacheGroups:{vendor:{test:/[\\/]node_modules[\\/]/,name:vendors,chunks:all}},}} 3.将js文件放到一个文件夹中
目前全部 js 文件都在 dist文件夹根目录下我们尝试把它们放到一个文件夹中 这个其实也简单在输出配置中修改 filename即output.filename加上scripts前缀即可汇总js文件至指定文件夹下生成。
output:{filename:scripts/[name].[contenthash].js,...
} 十一、拆分开发环境和生产环境配置
1.公共路径
publicPath 配置选项在各种场景中都非常有用我们可以通过它来指定应用程序中所有资源的基础路径。
output:{filename:scripts/[name].[contenthash].js,path:path.resolve(__dirname,./dist),clean:true,assetModuleFilename:images/[contenthash][ext],publicPath:http://localhost:8080/
},
基于环境设置
在开发环境中我们通常有一个assets/ 文件夹它与索引页面位于同一级 别。这没太大问题但是如果我们将所有静态资源托管至 CDN然后想在生产环境中使用呢 想要解决这个问题可以直接使用一个 environment variable(环境变量)。假设我们有一个变量 ASSET_PATH
import webpack from webpack;// 尝试使用环境变量否则使用根路径
const ASSET_PATH process.env.ASSET_PATH || /;
export default {output: {publicPath: ASSET_PATH,},plugins: [// 这可以帮助我们在代码中安全地使用环境变量new webpack.DefinePlugin({process.env.ASSET_PATH: JSON.stringify(ASSET_PATH),}),],
};
Automatic publicPath
有可能你事先不知道 publicPath 是什么webpack 会自动根据 import.meta.url、 document.currentScript、 script.src 或者 self.location 变量设置 publicPath。你需要做的是将 output.publicPath 设为 auto
module.exports {output: {publicPath: auto,},
};
注意在某些情况下不支持 document.currentScript例如IE 浏览器不得不引入一个 polyfill例如 currentScript Polyfill。
2.环境变量
想要消除 webpack.config.js 在开发环境和生产环境之间的差异需要环境变量(environment variable)。webpack命令行环境配置的 --env 参数可以允许传入任意数量的环境变量。而webpack.config.js 中可以访问到这些环境变量。例如--env production 或--env goallocal。
npx webpack --env production 可以通过命令传入变量区分环境
对于我们的 webpack 配置有一个必须要修改之处。通常module.exports 指向配置对象。要使用 env 变量你必须将 module.exports抛出对象转换为函数后即可动态传参
//...module.exports (env) {return {//...// 根据命令行参数 env 来设置不同环境的 modemode: env.production ? production : development,//...}
}
3.拆分配置文件
生产环境和开发环境使用的是一个配置文件我们需要将这两个文件单独放到不同的配置文件中。如 webpack.config.dev.js开发环境配置和 webpack.config.prod.js生产环境配置。在项目根目录下创建一个配置文件夹config 来存放他们。 开发环境执行 npx webpack serve -c config文件路径生产环境执行 npx webpack -c config文件路径
4.npm命令
每次打包或启动服务时都需要在命令行里输入一长串的命令。我们将父目录的 package.json、 node_modules 与 package-lock.json拷贝到当前目录下 可以在package.json中配置命令来方便使用配置 npm 脚本来简化命令行的输入。
scripts: {start: webpack serve -c ./config/webpack.config.js --env development,build: webpack -c ./config/webpack.config.js --env production
},
开发环境运行脚本npm run start生产环境运行脚本npm run build
关闭生产环境打包的文件过大警告提示
performance:{hints:false
}
5.提取公共配置
拆分出的配置文件存在大量重复配置代码时可以单独创建一个公共配置文件手动的将这些重复的代码单独提取到一个文件里。创建 webpack.config.common.js配置公共的内容。
6.合并配置文件
配置文件拆分好后我们又需要保证配置合并没用的问题这时候就需要webpack-merge这个工具。
安装 npm install webpack-merge -D创建新的config文件用以合并
const {merge} require(webpack-merge)const commonConfig require(./webpack.config.common)
const productionConfig require(./webpack.config.prod)
const developmentConfig require(./webpack.config.dev)module.exports((env){switch(true){case env.development:return merge(commonConfig,developmentConfig)case env.production:return merge(commonConfig,productionConfig)default:return new Error(No matching configuration was found)}
})
