荆州公司网站建设,wordpress怎么设计主题,wordpress分类教程,公司门户app下载webpack基础 webpack 处理css兼容问题webpack 处理css闪屏问题webpack 优化压缩css代码总结webpack 两种开发模式webpack 基本的功能webpack配置 5概念devServer 生产环境webpack配置实例开发环境webpack配置实例webpack优化 webpack 处理css兼容问题
下载loader 引入 package… webpack基础 webpack 处理css兼容问题webpack 处理css闪屏问题webpack 优化压缩css代码总结webpack 两种开发模式webpack 基本的功能webpack配置 5概念devServer 生产环境webpack配置实例开发环境webpack配置实例webpack优化 webpack 处理css兼容问题
下载loader 引入 package.json修改
postcss-loader 可以处理css兼容问题 需要在css-loader 之后——其他cssloader 之前 引入package.json 添加数组 browserlist:[“ie8”,“1%”,“not dead”] 百分之99 还存在的浏览器 大于等于ie8
webpack 处理css闪屏问题
MiniCssExtractPlugin 使用插件的loader 将css文件以单文件link方式引入 避免出现闪屏现象
不使用style-loader使用MiniCssExtractPlugin.loader
webpack 优化压缩css代码
CssMinimizerWebpackPlugin
下载安装 引入webpack 配置文件 直接在plugin中new CssMinimizerWebpackPlugin()提示默认生产环境下 js html 会自动压缩不需要额外的配置
总结
webpack 两种开发模式
开发模式代码能编译自动化运行 devServer 不用输出生产模式代码编译优化输出
webpack 基本的功能
开发模式可以编译 es module 语法生产模式可以编译 es module 语法 压缩js代码
webpack配置 5概念devServer
entry、output、loader、plugins、mode 、devServer
生产环境webpack配置实例
const path require(path); //node.js核心模块专门用来处理路径问题
const os require(os); // Node.js的os模块是一个内置模块用于提供与操作系统相关的功能。
const ESLintPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin); // 将css文件以单文件link方式引入 避免出现闪屏现象const CssMinimizerPlugin require(css-minimizer-webpack-plugin); //css压缩
const TerserWebpackPlugin require(terser-webpack-plugin); //js压缩
const ImageMinimizerPlugin require(image-minimizer-webpack-plugin); //图片压缩
const PreloadWebpackPlugin require(vue/preload-webpack-plugin); //预加载当前页的资源const threads os.cpus().length;function getStyleLoader(pre) {return [// 将 JS 字符串生成为 style 节点//style-loader,//不使用style-loader 下面的这个会生成单个css文件 link引入 避免出现闪屏现象MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块css-loader,// postcss-loader 能解决大部分css兼容问题{loader: postcss-loader,options: {postcssOptions: {plugins: [[postcss-preset-env,{// 其他选项},],],},},},pre,].filter(Boolean);//filter 过滤掉undefined null 等返回false的数组元素
}//启动命令 npx webpack --config ./config/webpack.prod.js
// 生产模式 不需要devServer
module.exports {// 入口entry: ./src/main.js, //相对路径// 输出output: {// 文件的输出路径// __dirname node.js的变量代表当前文件的文件夹目录path: path.resolve(__dirname, ../dist), // 绝对路径// 入口文件打包的文件名// filename: js/main.js, 下面的命名方式兼容多入口filename: js/[name].js,// 图片、字体等通过typeasset处理资源命名 可以统一定义在此处下面就不用写了//assetModuleFilename:media/[hash][ext][query]// code split给打包输出的其他名字命名chunkFilename: js/[name].chunk.js,clean: true, //自动清理上次打包的内容},//加载器module: {rules: [// loader的配置{oneOf: [// style-loader 将js中的css通过创建style标签添加html文件中生效// css-loader 将css资源编译成common.js的模块到js中{ test: /\.css$/, use: getStyleLoader() }, // use执行顺序 从右到左、从下到上{ test: /\.ts$/, use: ts-loader },{test: /\.s[ac]ss$/i,use: getStyleLoader(sass-loader),},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: asset,parser: {dataUrlCondition: {// 不需要下载 loader webpack5内置处理// 小于10kb 的图片转base64// 优点 减少请求的数量 缺点 体积会大一点点maxSize: 10 * 1024, // 10kb},},generator: {//打包后指定图片路径// [hash:10] hash值取前十位filename: imgs/[hash][ext][query],},},{test: /\.(ttf|woff2?|mp3|mp4)$/,type: asset/resource, //转base64 用assetgenerator: {//打包后指定文字路径filename: media/[hash][ext][query],},},{test: /\.js$/,exclude: /(node_modules|bower_components)/,use: [{loader: thread-loader, // 开启多进程options: {works: threads, // 进程数},},{loader: babel-loader,// 下面对于babel的预设处理 可以写到babel.config.js 文件中 也可以在此处options: {// presets: [babel/preset-env],cacheDirectory: true, // 开启babel缓存cacheCompression: false, // 关闭缓存文件压缩plugins: [babel/plugin-transform-runtime], //减少代码体积},},],},],},],},//插件// plugin的配置plugins: [new ESLintPlugin({context: path.resolve(__dirname, ../src), //检查文件exclude: node_modules, //默认值cache: true, // 开启缓存cacheLocation: path.resolve(__dirname,../node_modules/.cache/eslintcache),threads, //开启多进程}),new HtmlWebpackPlugin({//模版以public/index.html文件为模版创建新的html文件//新的html文件特点1结构和原来一致2.自动引入打包输出的资源template: path.resolve(__dirname, ../public/index.html),}),new PreloadWebpackPlugin({rel: preload, //option:prefetchas: scrpit, //option:stylesheet/icon/next}),new MiniCssExtractPlugin({filename: css/[name].[contenthash:10].css,chunkFilename: css/[name].chunk.[contenthash:10].css,}),new ImageMinimizerPlugin({test: /\.(jpe?g|png|gif|svg)$/i, // 匹配要压缩的图像文件类型的正则表达式exclude: /node_modules/, // 排除哪些文件夹下的图像不参与压缩minimizer: {implementation: ImageMinimizerPlugin.imageminGenerate,options: {plugins: [[gifsicle, { interlaced: true }], // 使用gifsicle插件压缩gif图像[jpegtran, { progressive: true }], // 使用jpegtran插件压缩jpg图像[optipng, { optimizationLevel: 5 }], // 使用optipng插件压缩png图像[svgo,{plugins: [preset-default, // 使用svgo的默认插件集合压缩svg图像prefixIds, // 为svg元素添加唯一前缀防止id冲突{name: sortAttrs,params: {xminsOrder: alphabetical, // 按字母顺序排序svg属性},},],},],],},},}),// 下面两个插件可以放在这个位置// new CssMinimizerPlugin(),// new TerserWebpackPlugin({// parallel:threads //开启多进程并设置进程数// })],// 也可以放在这个位置 webp5 推荐压缩插件放在下面optimization: {minimizer: [//压缩cssnew CssMinimizerPlugin(),// 压缩jsnew TerserWebpackPlugin({parallel: threads, //开启多进程并设置进程数}),],splitChunks: {chunks: all,//其他都用默认值},//当缓存文件发生变化一般所有都更新加上这个只更新修改的文件其他缓存文件不变runtimeChunk: {name: (entrypoint) runtime~${entrypoint.name}.js,},},//模式mode: production,devtool: source-map,
};
开发环境webpack配置实例
const path require(path); //node.js核心模块专门用来处理路径问题
const os require(os);const ESLintPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin); //编译时生成index.html
const MiniCssExtractPlugin require(mini-css-extract-plugin); // 将css文件以单文件link方式引入 避免出现闪屏现象const threads os.cpus().length;
//启动命令 npx webpack serve --config ./config/webpack.dev.jsmodule.exports {// 入口entry: ./src/main.js, //相对路径// 输出output: {// 文件的输出路径// 开发模式 没有输出path: undefined,// 入口文件打包的文件名filename: js/main.js,},// webpack 热更新 使用devServe后运行命令为 npx webpack serve ctrlc 终止批处理操作// 开发服务器不会输出资源在内存中编译打包devServer: {host: localhost,port: 4057,hot: true, // 表示启用热模块替换不用刷新整个页面open: true, //自动打开浏览器},//加载器module: {rules: [// loader的配置{oneOf: [// style-loader 将js中的css通过创建style标签添加html文件中生效// css-loader 将css资源编译成common.js的模块到js中{ test: /\.css$/, use: [MiniCssExtractPlugin.loader, css-loader] }, // use执行顺序 从右到左、从上到下{ test: /\.ts$/, use: ts-loader },{test: /\.s[ac]ss$/i,use: [// 将 JS 字符串生成为 style 节点MiniCssExtractPlugin.loader,// 将 CSS 转化成 CommonJS 模块css-loader,// 将 Sass 编译成 CSSsass-loader,],},{test: /\.(png|jpe?g|gif|webp|svg)$/,type: asset,parser: {dataUrlCondition: {// 不需要下载 loader webpack5内置处理// 小于10kb 的图片转base64// 优点 减少请求的数量 缺点 体积会大一点点maxSize: 10 * 1024, // 10kb},},generator: {//打包后指定图片路径// [hash:10] hash值取前十位filename: imgs/[hash][ext][query],},},{test: /\.(ttf|woff2?|mp3|mp4)$/,type: asset/resource, //转base64 用assetgenerator: {//打包后指定文字路径filename: media/[hash][ext][query],},},{test: /\.m?js$/,exclude: /(node_modules|bower_components)/,use: [{loader:thread-loader,options:{works:threads}},{loader: babel-loader,// 下面presets对于babel的预设处理 可以写到babel.config.js 文件中 也可以在此处options: {// presets: [babel/preset-env],cacheDirectory: true, // 开启babel缓存cacheCompression: false, // 关闭缓存文件压缩},},],},],},],},//插件// plugin的配置plugins: [new ESLintPlugin({context: path.resolve(__dirname, ../src), //检查文件cache:true,threads,}),new HtmlWebpackPlugin({//模版以public/index.html文件为模版创建新的html文件//新的html文件特点1结构和原来一致2.自动引入打包输出的资源template: path.resolve(__dirname, ../public/index.html),}),],//模式mode: development,devtool: cheap-module-source-map,
};
webpack优化
webpack优化-见下篇
