杭州建设银行网站首页,开票 网站建设,关键词优化的作用,怎么样可以自己做网站文章目录 entryoutputloaderpluginmode前端构建基础配置关联HTML插件html-webpack-plugin构建 CSS 解析 ES6和React JSX解析 ES6解析 React JSX 解析CSS、Less和Sass解析CSS解析Less解析sass 解析图片和字体资源解析#xff1a;解析图片资源解析#xff1a;解析字体资源解析解析图片资源解析解析字体资源解析使用url-loader webpack中的文件监听webpack中的热更新及原理分析热更新webpack-dev-server热更新使⽤ webpack-dev-middleware 文件指纹策略chunkhash、contenthash和hash文件指纹如何生成文件指纹设置 HTML 、CSS和JavaScript代码压缩JS压缩CSS压缩HTML压缩 webpack 本质上是一个打包工具它会根据代码的内容解析模块依赖帮助我们把多个模块的代码打包。 一切文件JavaScript、CSS、SCSS、图片、模板在 Webpack 眼中都是一个个模块这样的好处是能清晰的描述出各个模块之间的依赖关系以方便 Webpack 对模块进行组合和打包。 经过 Webpack 的处理最终会输出浏览器能使用的静态资源。 entry webpack 构建的入口entrywebpack 会读取这个文件并从它开始解析依赖在内部构件一个依赖图这个依赖图会引用项目中使用到的各个模块然后进行打包生成一个或者多个 bundle 文件。 我们常见的项目中如果是单页面应用那么入口只有一个如果是多个页面的项目那么通常是一个页面会对应一个构建入口。 单⼊⼝entry 是⼀个字符串如下代码 module.exports {entry: ./src/index.js };上述代码等价于 module.exports {entry: {main: ./src/index.js} }多⼊口entry 是⼀个对象如下代码 module.exports {entry: {app: ./src/app.js,home: ./src/home.js} };还有一种场景比较少用到即是多个文件作为一个入口来配置webpack 会解析多个文件的依赖然后打包到一起 // 使用数组来对多个文件进行打包 module.exports {entry: {main: [./src/foo.js,./src/bar.js]} }动态 entry const path require(path); const fs require(fs);// src/pages 目录为页面入口的根目录 const pagesRoot path.resolve(__dirname, ./src/pages); // fs 读取 pages 下的所有文件夹来作为入口使用 entries 对象记录下来 const entries fs.readdirSync(pagesRoot).reduce((entries, page) {// 文件夹名称作为入口名称值为对应的路径可以省略 index.jswebpack 默认会寻找目录下的 index.js 文件entries[page] path.resolve(pagesRoot, page);return entries; }, {});module.exports {// 将 entries 对象作为入口配置entry: entries,// ... };output output用来告诉 webpack 如何将编译后的文件输出到磁盘。webpack 构建生成的文件名、路径等都是可以配置的在配置文件中使用 output 字段来进行设置 module.exports {// ...output: {path: path.resolve(__dirname, dist),filename: bundle.js,}, }// 或者使用 entry 的名称 module.exports {entry: {main: ./src/index.js // main 为 entry 的名称},output: {filename: [name].js, // 使用 [name] 来引用 entry 名称在这里即为 mainpath: path.join(__dirname, /dist/[hash]),// 路径中使用 hash每次构建时会有一个不同 hash 值可以用于避免发布新版本时浏览器缓存导致代码没有更新// 文件名中也可以使用 hash}, }loader 我们在前端构建中会遇见需要使用各式各样的文件例如 css 代码图片模板代码等。webpack 中提供一种处理多种文件格式的机制便是使用 loader。我们可以把 loader 理解为是一个转换器负责把某种文件格式的内容转换成 webpack 可以支持打包的模块。例如我们需要 css-loader 来处理 .css 文件这里其实还需要 style-loader最终把不同格式的文件都解析成 js 代码以便打包后在浏览器中运行。 webpack 开箱即用只支持 JS 和 JSON 两种文件类型通过 Loaders 去支持其它文件类型并且把它们转化成有效的模块并且可以添加到依赖图中。 本身是一个函数接受源文件作为参数返回转换的结果。 常见的 Loaders 有哪些 babel-loader转换ES6、ES7等JS新特性语法css-loader支持.css文件的加载和解析less-loader将less文件转换成cssts-loader将TS转换成JSfile-loader进行图片、字体等的打包raw-loader将文件以字符串的形式导入thread-loader多线程打包JS和CSS 示例处理CSS一般要安装style-loader、css-loader 其中webpack4.x安装style-loader2.x、css-loader3.x: npm i css-loader3 style-loader2 -D如果要使用babel-loader使用webpack4.x要安装npm install babel-loader8 babel/core babel/preset-env babel的一系列工具链说明 babel/corebabel核心包,babel-loader的核心依赖。babel/preset-envES语法分析包。 注es6到es5的语法转换是以插件的形式实现的可以是自己的插件也可以是官方提供的插件如箭头函数转换插件babel/plugin-transform-arrow-functions。 由此我们可以看出我们需要转换哪些新的语法都可以将相关的插件一一列出但是这其实非常复杂因为我们往往需要根据兼容的浏览器的不同版本来确定需要引入哪些插件为了解决这个问题babel给我们提供了一个预设插件组即babel/preset-env可以根据选项参数来灵活地决定提供哪些插件。 babel/polyfillbabel/preset-env只是提供了语法转换的规则但是它并不能弥补浏览器缺失的一些新的功能如一些内置的方法和对象如Promise,Array.from等此时就需要polyfill来做js得垫片弥补低版本浏览器缺失的这些新功能。 我们需要注意的是polyfill的体积是很大的如果我们不做特殊说明它会把你目标浏览器中缺失的所有的es6的新的功能都做垫片处理。但是我们没有用到的那部分功能的转换其实是无意义的造成打包后的体积无谓的增大所以通常我们会在presets的选项里配置useBuiltIns: “usage”,这样一方面只对使用的新功能做垫片另一方面也不需要我们单独引入import babel/polyfill’了它会在使用的地方自动注入。 babel-loader理解成一个加载器webpack通过babel-loader这个中间桥梁告诉webpack怎样去调用babel/core、babel/preset-env 、babel/polyfill这些规则语法转换和弥补缺失去编译js。babel/plugin-transform-runtimepolyfill的垫片是在全局变量上挂载目标浏览器缺失的功能因此在开发类库第三方模块或者组件库时就不能再使用babel-polyfill了否则可能会造成全局污染此时应该使用transform-runtime。transform-runtime的转换是非侵入性的也就是它不会污染你的原有的方法。遇到需要转换的方法它会另起一个名字否则会直接影响使用库的业务代码。 故开发类库第三方模块或者组件库时使用transform-runtime平常的项目使用babel-polyfill即可. rules的配置如下 module: {rules:[{test: /\.css$/,use: [style-loader,css-loader]},{test: /\.jsx?$/, // 匹配文件路径的正则表达式通常我们都是匹配文件类型后缀exclude: /node_modules/, // 排除掉node_modules这个文件夹的js文件include: [path.resolve(__dirname,src) // 指定哪些路径下的文件需要经过 loader 处理],use: { // 指定使用的 loaderloader: babel-loader, // babel-loader 可以使用 babel 来将 ES6 代码转译为浏览器可以执行的的 ES5 代码options: {presets: [babel/preset-env]}}}] }plugin 插件⽤于 bundle ⽂件的优化资源管理和环境变量注⼊,作⽤于整个构建过程。 常用的plugin: CommonsChunkPlugin将chunks相同的模块代码提取成公共jswebpack4.x版本使用optimization.SplitChunkscleanWebpackPlugin清理构建目录ExtractTextWebpackPlugin将CSS从bundle文件里提取成一个独立的CSS文件webpack3.x版本webpack4.x版本使用mini-css-extract-pluginCopyWebpackPlugin将文件或者文件夹拷贝到构建的输出目录HtmlWebpackPlugin创建html文件去承载输出的bundlewebpack4.x使用4.x版本HtmlWebpackPluginUglifyjsWebpackPlugin压缩JSZipWebpackPlugin将打包出的资源生成一个zip包 const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {plugins: [new HtmlWebpackPlugin({template: ./src/index.html}),] }在 webpack 的构建流程中plugin 用于处理更多其他的一些构建任务。可以这么理解模块代码转换的工作由 loader 来处理除此之外的其他任何工作都可以交由 plugin 来完成。 例如使用 copy-webpack-plugin 来复制其他不需要 loader 处理的文件只需在配置中通过 plugins 字段添加新的 plugin 即可 webpack4.x安装copy-webpack-plugin6 版本 new CopyWebpackPlugin({patterns: [{from: path.resolve(__dirname, ../static),to: static,globOptions: {ignore: [.*]}}] })mode mode构建模式是 webpack4引入的新概念用于方便快捷地指定一些常用的默认优化配置。 mode取值 development开发环境production生产环境none 不需要任何默认优化配置 示例 module.exports {mode: development, // 指定构建模式为 development// ... }development 和 production 模式的区别 这两个模式会使用 DefinePlugin 来将 process.env.NODE_ENV 的值分别设置为 development 和 production方便开发者在项目业务代码中判断当前构建模式。production 模式会启用TerserPlugin来压缩JS代码让生成的代码文件更小。development 模式会启用 devtools: ‘eval’ 配置提升构建和再构建的速度。 前端构建基础配置 关联HTML插件html-webpack-plugin webpack4.x对应的html-webpack-plugin4 npm install html-webpack-plugin4 -D webpack配置 const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {plugins: [new HtmlWebpackPlugin({template: ./src/index.html}),] }构建 CSS webpack4.x安装style-loader2.x、css-loader3.x 安装 npm i css-loader3 style-loader2 -D配置中引入 loader 来解析和处理 CSS 文件 module: {rules: [{test: /\.css$/,include: [path.resolve(__dirname, src)],use: [style-loader, css-loader],}] }css-loader 负责解析 CSS 代码主要是为了处理 CSS 中的依赖例如 import 和 url() 等引用外部文件的声明style-loader 会将 css-loader 解析的结果转变成 JS 代码运行时动态插入 style 标签来让 CSS 代码生效。 如果需要单独把 CSS 文件分离出来我们需要使用 mini-css-extract-plugin 插件。 注v4 版本之后才开始使用 mini-css-extract-plugin之前的版本是使用 extract-text-webpack-plugin。 安装mini-css-extract-plugin插件 npm i mini-css-extract-plugin -D配置 解析 ES6和React JSX 解析 ES6 webpack4.x安装babel/core,babel/preset-env,babel-loader8 npm i babel/core babel/preset-env babel-loader8 -D在根路径下新建一个.babelrc文件增加ES6的babel preset配置代码如下 {preset: [babel/preset-env] }webpack.config.js配置 module: {rules: [{test: /\.js$/,use: babel-loader} ] }解析 React JSX 安装 npm i babel/preset-react -Dnpm i react react-dom -S在.babelrc文件中添加react相关配置 {presets: [babel/preset-env, babel/preset-react] } 编写一个示例代码JS例如src/search.js use strictimport React from react import ReactDOM from react-domclass Search extends React.Component {render() {return divSearch Text/div} }ReactDOM.render(Search /, document.getElementById(root)) 然后编译后 引用编译后的JS查看效果即可。其中在dist中编写的search.html示例需要添加root这个dom节点。 解析CSS、Less和Sass 解析CSS 解析css,需要安装style-loader和css-loader。 其中webpack4.x安装style-loader2.x、css-loader3.x: npm i css-loader3 style-loader2 -D版本参考https://github.com/webpack-contrib/style-loader/blob/v2.0.0/package.json rules配置 {test: /.css$/,use: [style-loader, css-loader] }解析Less 解析less,需要安装less、less-loader。 其中webpack4.x建议安装less-loader6less-loader7.0.1也支持webpack4.x npm i less less-loader6 -D版本参考https://github.com/webpack-contrib/less-loader/blob/v6.2.0/package.json rules配置如下 {test: /.less$/,use: [style-loader, css-loader, less-loader] }解析sass webpack4.x安装依赖 npm i sass-loader7.3.1 node-sass4.14.1 sass-resources-loader2 sass-resources-loader2.2.4 -Delement-ui依赖的sass-loder跟node-sass版本 npm i sass-loader10.2.0 sass1.29.0 -Drules配置 {test: /.scss$/,use: [style-loader, css-loader,sass-loader] }解析图片和字体 资源解析解析图片 解析图片可以安装file-loader,其中file-loader最新版本为6.2.0支持webpack4.x。 npm i file-loader -D版本参考https://github.com/webpack-contrib/file-loader/blob/v6.2.0/package.json rules配置如下 {test: /.(png|jpe?g|gif)$/,use: file-loader }资源解析解析字体 rules配置如下 {test: /.(woff|woff2|eot|otf|ttf)$/,use: file-loader },css参考样式 font-face {font-family: SourceHeavy;src: url(./images/SourceHeavy.otf) format(truetype); }.search-text {font-size: 20px;color: #f00;font-family: SourceHeavy; }资源解析使用url-loader url-loader 也可以处理图⽚和字体,可以设置较⼩资源⾃动 base64,其中url-loader内部实现也是使用的file-loader。 目前url-loader最新版本为4.1.1支持webpack4.x. npm i url-loader -D版本参考https://github.com/webpack-contrib/url-loader/blob/master/package.json rules配置把之前关于图片的file-loader配置替换 {test: /.(png|jpe?g|gif)$/,use: [{ loader: url-loader, options: { limit: 10240 } }],}webpack中的文件监听 ⽂件监听是在发现源码发⽣变化时⾃动重新构建出新的输出⽂件。 webpack 开启监听模式有两种⽅式 启动 webpack 命令时带上 --watch 参数在配置 webpack.config.js 中设置 watch: true 在package.json中添加命令如下 scripts: {watch: webpack --watch},注唯⼀缺陷每次需要⼿动刷新浏览器。 ⽂件监听的原理分析: 轮询判断⽂件的最后编辑时间是否变化。 某个⽂件发⽣了变化并不会⽴刻告诉监听者⽽是先缓存起来等 aggregateTimeout module.export {//默认 false也就是不开启watch: true,//只有开启监听模式时watchOptions才有意义wathcOptions: {//默认为空不监听的文件或者文件夹支持正则匹配ignored: /node_modules/,//监听到变化发生后会等300ms再去执行默认300msaggregateTimeout: 300,//判断文件是否发生变化是通过不停询问系统指定文件有没有变化实现的默认每秒问1000次poll: 1000} }webpack中的热更新及原理分析 热更新webpack-dev-server webpack-dev-server不刷新浏览器webpack-dev-server不输出⽂件⽽是放在内存中使⽤ HotModuleReplacementPlugin插件 webpack4.x对应安装的webpack-dev-server版本3.x。 npm i webpack-dev-server3 -Dpackage.json配置 scripts: {dev: webpack-dev-server --open }其中open是构建完成之后自动开启浏览器。 在webpack.config.js配置 use strictconst webpack require(webpack);module.exports {// 其他省略mode: development,plugins: [new webpack.HotModuleReplacementPlugin()],devServer: {contentBase: ./dist,hot: true} }热更新的原理分析 Webpack Compile:将JS编译成BundleHMR Server: 将热更新的⽂件输出给HMR Rumtime Bundle server: 提供⽂件在浏览器的访问HMR Rumtime: 会被注⼊到浏览器更新⽂件的变化bundle.js: 构建输出的⽂件 热更新使⽤ webpack-dev-middleware WDM 将 webpack 输出的⽂件传输给服务器适⽤于灵活的定制场景 示例 const express require(express); const webpack require(webpack); const webpackDevMiddleware require(webpack-dev-middleware); const app express(); const config require(./webpack.config.js); const compiler webpack(config);app.use(webpackDevMiddleware(compiler, {publicPath: config.output.publicPath })); app.listen(3000, function () {console.log(Example app listening on port 3000!\n); });文件指纹策略chunkhash、contenthash和hash 注文件指纹只能用于生产环境。 文件指纹如何生成 Hash和整个项⽬的构建相关只要项⽬⽂件有修改整个项⽬构建的hash值就会更改Chunkhash和webpack 打包的chunk 有关不同的entry 会⽣成不同的chunkhash值Contenthash根据⽂件内容来定义hash ⽂件内容不变则contenthash不变 文件指纹设置 JS文件设置output的filename使⽤[chunkhash]。 output: {path: path.join(__dirname, dist),filename: [name]_[chunkhash:8].js}CSS文件设置MiniCssExtractPlugin的filename使⽤[contenthash] webpack4.x安装的mini-css-extract-plugin1.0.0 npm i mini-css-extract-plugin1.0.0 -D配置 const MiniCssExtractPlugin require(mini-css-extract-plugin)module.exports {// 其他省略mode: production,module: {rules: [{test: /.css$/,use: [MiniCssExtractPlugin.loader, css-loader],},{test: /.less$/,use: [MiniCssExtractPlugin.loader, css-loader, less-loader],}]},plugins: [new MiniCssExtractPlugin({filename: [name]_[contenthash:8].css,}),], } 插件参考地址https://github.com/webpack-contrib/mini-css-extract-plugin/blob/v1.0.0/package.json 图片文件设置file-loader的name使⽤[hash] const MiniCssExtractPlugin require(mini-css-extract-plugin)module.exports {// 其他省略mode: production,module: {rules: [{test: /.(png|jpe?g|gif)$/,use: [{loader: file-loader,options: { name: [name]_[hash:8].[ext] },},],},{test: /.(woff|woff2|eot|otf|ttf)$/,use: [{loader: file-loader,options: { name: [name]_[hash:8].[ext] },},]}]} }HTML 、CSS和JavaScript代码压缩 JS压缩 webpack4及以后内置了uglifyjs-webpack-plugin CSS压缩 需要安装optimize-css-assets-webpack-plugin同时使⽤cssnano。 说明optimize-css-assets-webpack-plugin插件目前官网最新版本5.0.8使用的webpack为^4.44.1。 npm i optimize-css-assets-webpack-plugin5 cssnano4 -D插件配置地址:https://github.com/NMFR/optimize-css-assets-webpack-plugin/blob/master/package.json const OptimizeCssAssetsPlugin require(optimize-css-assets-webpack-plugin)module.exports {// 其他省略mode: production,plugins: [new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require(cssnano),}),], }HTML压缩 安装html-webpack-plugin并设置压缩参数。 其中webpack4.x对应的html-webpack-plugin4。 npm i html-webpack-plugin4 -Dwebpack配置 const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {plugins: [new HtmlWebpackPlugin({template: path.join(__dirname, src/index.html),filename: index.html,chunks: [index],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),new HtmlWebpackPlugin({template: path.join(__dirname, src/search.html),filename: search.html,chunks: [search],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),], }webpack.dev.js完整配置 use strictconst path require(path) const webpack require(webpack)module.exports {entry: {index: ./src/index.js,search: ./src/search.js,},output: {path: path.join(__dirname, dist),filename: [name].js,},mode: development,module: {rules: [{test: /.js$/,use: babel-loader,},{test: /.css$/,use: [style-loader, css-loader],},{test: /.less$/,use: [style-loader, css-loader, less-loader],},{test: /.(png|jpe?g|gif)$/,use: [{ loader: url-loader, options: { limit: 10240 } }],},{test: /.(woff|woff2|eot|otf|ttf)$/,use: file-loader,},],},plugins: [new webpack.HotModuleReplacementPlugin(),new HtmlWebpackPlugin({template: path.join(__dirname, src/index.html),filename: index.html,chunks: [index],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),new HtmlWebpackPlugin({template: path.join(__dirname, src/search.html),filename: search.html,chunks: [search],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),],devServer: {contentBase: ./dist,hot: true,}, }webpack.prod.js完整配置 use strictconst path require(path) const MiniCssExtractPlugin require(mini-css-extract-plugin) const OptimizeCssAssetsPlugin require(optimize-css-assets-webpack-plugin) const HtmlWebpackPlugin require(html-webpack-plugin)module.exports {entry: {index: ./src/index.js,search: ./src/search.js,},output: {path: path.join(__dirname, dist),filename: [name]_[chunkhash:8].js,},mode: production,module: {rules: [{test: /.js$/,use: babel-loader,},{test: /.css$/,use: [MiniCssExtractPlugin.loader, css-loader],},{test: /.less$/,use: [MiniCssExtractPlugin.loader, css-loader, less-loader],},{test: /.(png|jpe?g|gif)$/,use: [{loader: file-loader,options: { name: [name]_[hash:8].[ext] },},],},{test: /.(woff|woff2|eot|otf|ttf)$/,use: [{loader: file-loader,options: { name: [name]_[hash:8].[ext] },},],},],},plugins: [new MiniCssExtractPlugin({filename: [name]_[contenthash:8].css,}),new OptimizeCssAssetsPlugin({assetNameRegExp: /\.css$/g,cssProcessor: require(cssnano),}),new HtmlWebpackPlugin({template: path.join(__dirname, src/index.html),filename: index.html,chunks: [index],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),new HtmlWebpackPlugin({template: path.join(__dirname, src/search.html),filename: search.html,chunks: [search],inject: true,minify: {html5: true,collapseWhitespace: true,preserveLineBreaks: false,minifyCSS: true,minifyJS: true,removeComments: false,},}),], }package.json: {name: webpacktest,version: 1.0.0,description: ,main: index.js,scripts: {test: echo \Error: no test specified\ exit 1,build: webpack --config webpack.prod.js,watch: webpack --watch,dev: webpack-dev-server --config webpack.dev.js --open},keywords: [],author: ,license: ISC,devDependencies: {babel/core: ^7.22.10,babel/preset-env: ^7.22.10,babel/preset-react: ^7.22.5,babel-loader: ^8.3.0,css-loader: ^3.6.0,cssnano: ^4.1.11,file-loader: ^6.2.0,html-webpack-plugin: ^4.5.2,less: ^4.2.0,less-loader: ^6.2.0,mini-css-extract-plugin: ^1.0.0,optimize-css-assets-webpack-plugin: ^5.0.8,react: ^18.2.0,react-dom: ^18.2.0,style-loader: ^2.0.0,url-loader: ^4.1.1,webpack: ^4.46.0,webpack-cli: ^3.3.12,webpack-dev-server: ^3.11.3} }.babelrc配置 {presets: [babel/preset-env, babel/preset-react] }