webpack

it2024-04-19  10

1 babel转化高版本的ES6/7/8语法 2 3 在开发中,我们需要把ES6/7/8的高级语法糖转化成兼容性很强的ES5语法,次吃则需要借助babel帮 4 助我们进行转化。 @babel/core 是babel的核心模块, @babel/preset-env包含了将ES6转成ES5的模块 5 安装: npm i babel-loader @babel/core @babel/preset-env -D 1 { 2 test: /\.js$/, 3 use: [ 4 { 5 loader: 'babel-loader', 6 options: { 7 presets: ['@babel/preset-env'], 8 plugins: ["@babel/plugin-proposal-class-properties"] 9 } 10 } 11 ] 12 }, 1 抽离独立的css文件 2 3 之前的打包是把css的所有样式都放置在index.html文件中,如果样式很多会造成加载阻塞。此时,需要 4 5 借助插件(mini-css-extract-plugin)抽出独立的CSS文件,支持按需加载和异步加载。 6 安装: npm i mini-css-extract-plugin -D

压缩css文件 使用mini-css-extract-plugin插件抽离出独立的样式文件后,需要手动优化和压缩CSS资源,需要借助 插件: optimize-css-assets-webpack-plugin

 

转载于:https://www.cnblogs.com/zhangzhengyang/p/11235262.html

最新回复(0)