如何解决Webpack自动前缀程序问题 .browserslitrc被忽略
我正在使用webpack,postcss,browserslit和autoprefixer。除自动前缀外,其他所有功能都正常运行。
当我编写此CSS代码时,输出是相同的。我在https://autoprefixer.github.io/中检查了.css代码和browserslist配置,我的配置文件是否正确?还是我错了?
.block {
display:flex;
}
但是它必须是这样的:
.block {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
}
这是我的webpack.config.js
const autoprefixer = require('autoprefixer');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin');
const TerserJSPlugin = require('terser-webpack-plugin');
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
module.exports = (env,argv) => {
return {
entry: {
bundle: './src/index.js',},output: {
filename: '[name].js',optimization: {
minimizer: [
new TerserJSPlugin({
sourceMap: true,}),new OptimizeCSSAssetsPlugin({
cssProcessorOptions: {
map: {
inline: false,annotation: true,],plugins: [
new CleanWebpackPlugin(),new MiniCssExtractPlugin({
moduleFilename: (chunk) => {
return chunk.name === 'script' ? 'style.css' : '[name].css';
},chunkFilename: '[id].css',devtool:
argv.mode === 'development'
? 'cheap-module-source-map'
: 'source-map',mode: 'development',module: {
rules: [
{
test: /\.js$/,exclude: /node_modules/,use: {
loader: 'babel-loader',options: {
plugins: [
'@babel/plugin-proposal-class-properties',presets: ['@babel/preset-env'],{
test: /\.(sa|sc|c)ss$/,use: [
MiniCssExtractPlugin.loader,'css-loader',{
loader: 'postcss-loader',options: {
postcssOptions: {
plugins: [autoprefixer()],'sass-loader',externals: {
jquery: 'jQuery',};
};
还有.browserslistrc
last 2 versions
> 0.5%
ie >= 11
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。