网站建设前期工作,二手车网站怎么做,江苏城乡建设,免费设计图片素材网站提取 Css 成单独文件CSS 文件目前被打包到 js 文件中#xff0c;当 js 文件加载时#xff0c;会创建一个 style 标签来生成样式,加载一个页面的时候#xff0c;先 html - js - css#xff0c;会有页面闪屏现象#xff0c;用户体验不好。应该是单独的 Css 文件当 js 文件加载时会创建一个 style 标签来生成样式,加载一个页面的时候先 html - js - css会有页面闪屏现象用户体验不好。应该是单独的 Css 文件通过 link 标签加载性能才好。下载包npm i mini-css-extract-plugin -D配置webpack.prod.jsconst path require(path);
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],}],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),]mode: production,
};CSS 兼容性处理解决 CSS 的兼容性问题下载包npm i postcss-loader postcss postcss-preset-env -D放在在 css-loader 之后less-loader或者scss-loader之前const path require(path);
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,],}],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({// 定义输出文件名和目录filename: static/css/main.css,}),]mode: production,
};控制兼容性我们可以在 package.json 文件中添加 browserslist 来控制样式的兼容性做到什么程度。browserslist 文档{// 其他省略browserslist: [ie 8]
}实际开发中我们一般不考虑旧版本浏览器了所以我们可以这样设置{// 其他省略browserslist: [last 2 version, 1%, not dead]
}CSS 压缩下载包npm i css-minimizer-webpack-plugin -D配置webpack.prod.jsconst path require(path);
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: [{test: /\.css$/,use: getStyleLoaders(),},{test: /\.less$/,use: getStyleLoaders(less-loader),},{test: /\.s[ac]ss$/,use: getStyleLoaders(sass-loader),},{test: /\.styl$/,use: getStyleLoaders(stylus-loader),}],},plugins: [new HtmlWebpackPlugin({template: path.resolve(__dirname, ../public/index.html),}),// 提取css成单独文件new MiniCssExtractPlugin({filename: static/css/main.css,}),// css压缩new CssMinimizerPlugin(),]mode: production,
};
