萧山网站建设xsszwl,网站蓝色导航栏代码,建设京剧网站的意义,商城小程序开发发本文作者为 360 奇舞团前端开发工程师 webpack是Javascript工具链的关键部分。webpack是个用于现代JavaScript应用程序的静态模块打包工具。它不仅可以支持ESM和CommonJS模块化编程#xff0c;而且还可以支持或扩展支持许多不同的静态资源#xff0c;例如#xff1a;Files,I… 本文作者为 360 奇舞团前端开发工程师 webpack是Javascript工具链的关键部分。webpack是个用于现代JavaScript应用程序的静态模块打包工具。它不仅可以支持ESM和CommonJS模块化编程而且还可以支持或扩展支持许多不同的静态资源例如Files,Images, Fonts, JS, CSS, HTML等。 Plugin 概念 插件 是webpack的支柱功能它是一个具有apply方法的JavaScript对象。apply方法会被webpack compiler调用并且插件在其整个生命周期都可以访问到compiler对象因此他可以hook整个编译的生命周期。 class MyCustomPlugin {apply(compiler) {compiler.hooks.run.tap(MyCustomPluginName,(compilation){console.log(webpack 构建正在启动);})}
}
module.exports MyCustomPlugin; webpack可以利用plugin来扩展其功能常用的插件有 HtmlWebpackPlugin根据模板生成HTML文件并自动添加CSS和JS的引用。MiniCssExtractPlugin将CSS提取为单独的文件并在HTML中引用它。UglifyJsPlugin压缩JS代码减小文件大小提高加载速度。CleanWebpackPlugin清空指定目录中的旧文件防止文件冗余。CopyWebpackPlugin复制指定目录中的文件到输出目录中。DefinePlugin定义全局常量方便在JS中使用。ProvidePlugin自动加载模块无需在JS文件中导入。HotModuleReplacementPlugin开启模块热替换功能支持修改代码后自动刷新页面。IgnorePlugin忽略指定模块减小文件大小提高打包速度。BundleAnalyzerPlugin生成打包报告分析项目中各个模块的大小和依赖关系。 使用 以下是一个基于HtmlWebpackPlugin的示例工程主要展示插件的基本使用帮助理解插件的扩展能力 image.png 最终执行编译后只会输出dist/main.js没有.html文件此时我们可以引入插件HtmlWebpackPlugin来生成.html代码并且自动引入编译后的js bundle它的安装如下 npm install --save-dev html-webpack-plugin 配置与最终结果如下图 image.png Loader 概念 loader用于对模块的源代码转换它相当于编译期间的一个任务。起初webpack只理解javaScript文件但是webpack将每个作为模块导入的文件视为依赖项并将其添加到依赖关系图中。因此为了处理静态资源的导入例如Files,Images, Fonts, CSS, Json等webpack使用Loader来将这些文件加载到bundle中。常用的loader: babel-loader将ES6及以上版本的JavaScript代码转换成ES5及以下的版本以保证兼容性。css-loader处理CSS文件中的url()等引用外部文件的语法并将CSS代码转换为Webpack可以处理的模块。file-loader将文件复制到输出目录并返回文件的URL地址。url-loader类似于file-loader但是可以将文件转换为Base64编码的Data URL减少HTTP请求。style-loader将CSS代码以style标签的形式插入到HTML文件中。sass-loader处理Sass/Scss代码并将其转换为CSS代码。less-loader处理Less代码并将其转换为CSS代码。json-loader处理JSON格式的文件并将其转换为JavaScript对象。xml-loader处理XML格式的文件并将其转换为JavaScript对象。raw-loader将文件内容以字符串的形式导出。 使用 基于上述插件的示例工程我们为其加入CSS代码来展示如何使用Loader转换CSS。 image.png 一切准备就绪执行打包脚本发现报错You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file。 为了能够导入CSS我们需要安装style-loader和css-loader并在module.rules下配置这些loader: npm install --save-dev style-loader css-loader 具体配置如下图 image.png 重新打包后浏览器运行index.html会发现css样式生效了。 不过需要注意的是 导入css文件应保证 loader 的先后顺序style-loader 在前而 css-loader 在后。否则webpack可能会抛出错误。这是因为loader 可以链式调用 链中的每个 loader 都将对资源进行依次转换和传递。只需保证webpack链中的最后一个loader返回javaScript即可。 - END - 关于奇舞团 奇舞团是 360 集团最大的大前端团队代表集团参与 W3C 和 ECMA 会员TC39工作。奇舞团非常重视人才培养有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。
