重庆网站开发商城,要学好网站开发要会什么,网站做跳转,企业网站策划书下载Css 处理
提取 Css 成单独文件
Css 文件目前被打包到 js 文件中#xff0c;当 js 文件加载时#xff0c;会创建一个 style 标签来生成样式
这样对于网站来说#xff0c;会出现闪屏现象#xff0c;用户体验不好
我们应该是单独的 Css 文件#xff0c;通过 link 标签加载…Css 处理
提取 Css 成单独文件
Css 文件目前被打包到 js 文件中当 js 文件加载时会创建一个 style 标签来生成样式
这样对于网站来说会出现闪屏现象用户体验不好
我们应该是单独的 Css 文件通过 link 标签加载性能才好
1. 下载包
npm i mini-css-extract-plugin -D2. 配置
webpack.prod.js
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [MiniCssExtractPlugin.loader, css-loader],},{test: /\.less$/,use: [MiniCssExtractPlugin.loader, css-loader, less-loader],},{test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader, css-loader, sass-loader],},{test: /\.styl$/,use: [MiniCssExtractPlugin.loader, css-loader, stylus-loader],},{test: /\.(png|jpe?g|gif|webp)$/,type: asset,parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: static/imgs/[hash:8][ext][query],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};3. 运行指令
npm run buildCss 兼容性处理
1. 下载包
npm i postcss-loader postcss postcss-preset-env -D2. 配置
webpack.prod.js
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},],},{test: /\.less$/,use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},less-loader,],},{test: /\.s[ac]ss$/,use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},sass-loader,],},{test: /\.styl$/,use: [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},stylus-loader,],},{test: /\.(png|jpe?g|gif|webp)$/,type: asset,parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: static/imgs/[hash:8][ext][query],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};3. 控制兼容性
我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。
{// 其他省略browserslist: [ie 8]
}想要知道更多的 browserslist 配置查看browserslist 文档
以上为了测试兼容性所以设置兼容浏览器 ie8 以上。
实际开发中我们一般不考虑旧版本浏览器了所以我们可以这样设置
{// 其他省略browserslist: [last 2 version, 1%, not dead]
}4. 合并配置
webpack.prod.js
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);// 获取处理样式的Loaders
const getStyleLoaders (preProcessor) {return [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},preProcessor,].filter(Boolean);
};module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders(less-loader),},{test: /\.s[ac]ss$/,use: getStyleLoaders(sass-loader),},{test: /\.styl$/,use: getStyleLoaders(stylus-loader),},{test: /\.(png|jpe?g|gif|webp)$/,type: asset,parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: static/imgs/[hash:8][ext][query],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};5. 运行指令
npm run buildCss 压缩
1. 下载包
npm i css-minimizer-webpack-plugin -D2. 配置
webpack.prod.js
const path require(path);
const ESLintWebpackPlugin require(eslint-webpack-plugin);
const HtmlWebpackPlugin require(html-webpack-plugin);
const MiniCssExtractPlugin require(mini-css-extract-plugin);
const CssMinimizerPlugin require(css-minimizer-webpack-plugin);// 获取处理样式的Loaders
const getStyleLoaders (preProcessor) {return [MiniCssExtractPlugin.loader,css-loader,{loader: postcss-loader,options: {postcssOptions: {plugins: [postcss-preset-env, // 能解决大多数样式兼容性问题],},},},preProcessor,].filter(Boolean);
};module.exports {entry: ./src/main.js,output: {path: path.resolve(__dirname, ../dist), // 生产模式需要输出filename: static/js/main.js, // 将 js 文件输出到 static/js 目录中clean: true,},module: {rules: [{// 用来匹配 .css 结尾的文件test: /\.css$/,// use 数组里面 Loader 执行顺序是从右到左use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders(less-loader),},{test: /\.s[ac]ss$/,use: getStyleLoaders(sass-loader),},{test: /\.styl$/,use: getStyleLoaders(stylus-loader),},{test: /\.(png|jpe?g|gif|webp)$/,type: asset,parser: {dataUrlCondition: {maxSize: 10 * 1024, // 小于10kb的图片会被base64处理},},generator: {// 将图片文件输出到 static/imgs 目录中// 将图片文件命名 [hash:8][ext][query]// [hash:8]: hash值取8位// [ext]: 使用之前的文件扩展名// [query]: 添加之前的query参数filename: static/imgs/[hash:8][ext][query],},},{test: /\.(ttf|woff2?)$/,type: asset/resource,generator: {filename: static/media/[hash:8][ext][query],},},{test: /\.js$/,exclude: /node_modules/, // 排除node_modules代码不编译loader: babel-loader,},],},plugins: [new ESLintWebpackPlugin({// 指定检查文件的根目录context: path.resolve(__dirname, ../src),}),new HtmlWebpackPlugin({// 以 public/index.html 为模板创建文件// 新的html文件有两个特点1. 内容和源文件一致 2. 自动引入打包生成的js等资源template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),// css压缩new CssMinimizerPlugin(),],// devServer: {// host: localhost, // 启动服务器域名// port: 3000, // 启动服务器端口号// open: true, // 是否自动打开浏览器// },mode: production,
};3. 运行指令
npm run build
