webpack 给css添加前缀

时间：2022-02-25 15:08:13

环境是webpack 3，sass(.scss)

添加前缀需要用到的是sass-loader, posscss-loader, autoprefixer, css-loader。

webpack中的配置：

{
   test:/\.scss$/,
   loader:ExtractTextPlugin.extract({
      use:['css-loader?minimize','postcss-loader','sass-loader']
   }),
   exclude:/node_modules/
}

我的项目中是需要在html中插入css文件的，所以是上面的写法。

postcss-loader默认会读取根目录下的postcss.config.js

postcss.config.js文件中的内容：

module.exports = {
    plugins: [
        require('autoprefixer')
    ]
};

需要在package.json中配置

"browserslist": [
"Firefox > 20",
"iOS >= 7",
"ie >= 8",
"last 5 versions",
"> 5%"
  ]

 

browserlist的配置参考：

https://github.com/ai/browserslist#queries

问题：

上面的配置，如果没有写Firefox >20则，生成的css文件，没有-moz-前缀了，因为firfox已经支持最新的css3了，并且已经超过了5个版本。

加上之后会有三个前缀，-webkit-, -moz-, -ms-

css3 浏览器的兼容性

http://www.runoob.com/cssref/css3-browsersupport.html

 

 

webpack.config.js

const webpack = require('webpack');
const WebpackDevServer = require("webpack-dev-server");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackChunkHash = require("webpack-chunk-hash");
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin'); //清理文件夹

function resolve(file){
return path.resolve(__dirname, file)
}

module.exports = {
// devtool:'eval-source-map',
    entry:{
        app:resolve('./src/app.js'),
        vendor:['vue','vue-router','vuex']
    },
    output:{
        path:resolve('./dist/'),
        filename:'[name].js?v=[hash]',
        publicPath:'/dist/',
//chunkFilename:'chunks/[name].js?v=[chunkhash:8]'
    },
    resolve:{
        extensions:['.vue','.js'],
        alias:{
'vue$':'vue/dist/vue.common.js'
        }
    },
    plugins:[
//清空输出目录
//new CleanPlugin(['chunks'], {
//    "root": resolve('./dist'),
//    verbose: true,
//    dry: false
//}),
new webpack.DefinePlugin({
'process.env': {
                NODE_ENV: '"production"'
            }
        }),
new UglifyJsPlugin({
            sourceMap:false,
            compress:{
                warnings:false
            }
        }),
new CommonsChunkPlugin({
            name:['vendor','manifest'],
            minChunks: Infinity
        }),
new HtmlWebpackPlugin({
            template:resolve('./src/index.template.html'),
            filename:resolve('./index.html'),
            inject:'body',
// chunks:['app','vendor','runtime']
            chunks:['manifest','app','vendor'],
            hash: false,
        }),
new ExtractTextPlugin({
            filename:'bundle.css?v=[hash]',
            allChunks:true,
            disable:false,
            publicPath:'/dist'
        }),
//new WebpackChunkHash(),
//new webpack.HashedModuleIdsPlugin()

    ],
    module:{
        rules:[
            { 
                test:/\.vue$/, 
                loader:'vue-loader',
                exclude:/node_modules/
            },{ 
                test:/\.js$/, 
                loader:'babel-loader?cacheDirectory',
                exclude:/node_modules/,
                options:"{presets:[['es2015', { modules:false }]]}"
            },{
                test:/\.scss$/,
                loader:ExtractTextPlugin.extract({
                    use:['css-loader?minimize','postcss-loader','sass-loader']
                }),
                exclude:/node_modules/
            },{
                test:/\.css$/,
                loader:ExtractTextPlugin.extract({
                    use:['css-loader?minimize']
                })
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    }
}

 

webpack.dev.js，这个

const webpack = require('webpack');
const WebpackDevServer = require("webpack-dev-server");
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const WebpackChunkHash = require("webpack-chunk-hash");
const CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
const UglifyJsPlugin = webpack.optimize.UglifyJsPlugin;
const ExtractTextPlugin = require('extract-text-webpack-plugin');
const CleanPlugin = require('clean-webpack-plugin'); //清理文件夹

function resolve(file){
return path.resolve(__dirname, file)
}

module.exports = {
    devtool:'eval-source-map',
    entry:{
        app:resolve('./src/app.js'),
        vendor:['vue','vue-router','vuex']
    },
    output:{
        path:resolve('./dist/'),
        filename:'[name].js?v=[hash]',
        publicPath:'/dist/',
//chunkFilename:'chunks/[name].js?v=[chunkhash:8]'
    },
    resolve:{
        extensions:['.vue','.js'],
        alias:{
'vue$':'vue/dist/vue.common.js'
        }
    },
    plugins:[
//清空输出目录
//new CleanPlugin(['chunks'], {
//    "root": resolve('./dist'),
//    verbose: true,
//    dry: false
//}),
new UglifyJsPlugin({
            sourceMap:true,
            compress:{
                warnings:false
            }
        }),
new CommonsChunkPlugin({
            name:['vendor','manifest'],
            minChunks: Infinity
        }),
new HtmlWebpackPlugin({
            template:resolve('./src/index.template.html'),
            filename:resolve('./index.html'),
            inject:'body',
// chunks:['app','vendor','runtime']
            chunks:['manifest','app','vendor']
        }),
new ExtractTextPlugin({
            filename:'bundle.css?v=[hash]',
            allChunks:true,
            disable:false,
            publicPath:'/dist'
        }),
//new WebpackChunkHash(),
//new webpack.HashedModuleIdsPlugin()
new webpack.HotModuleReplacementPlugin()
    ],
    module:{
        rules:[
            { 
                test:/\.vue$/, 
                loader:'vue-loader',
                exclude:/node_modules/
            },{ 
                test:/\.js$/, 
                loader:'babel-loader?cacheDirectory',
                exclude:/node_modules/,
                options:"{presets:[['es2015', { modules:false }]]}"
            },{
                test:/\.scss$/,
                loader:ExtractTextPlugin.extract({
                    use:['css-loader?minimize','sass-loader']
                }),
                exclude:/node_modules/
            },{
                test:/\.css$/,
                loader:ExtractTextPlugin.extract({
                    use:['css-loader?minimize']
                })
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)(\?\S*)?$/,
                loader: 'file-loader'
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?\S*)?$/,
                loader: 'file-loader',
                query: {
                    name: '[name].[ext]?[hash]'
                }
            }
        ]
    },
    devServer: {
        historyApiFallback: true,
        contentBase: "./",
        publicPath: '/dist/',
        compress: true,
        quiet: false, //控制台中不输出打包的信息
        noInfo: false,
        hot: true, //开启热点
        inline: true, //开启页面自动刷新
        lazy: false, //不启动懒加载
        progress: true, //显示打包的进度
        host: 'xxx.com',
        port: '8090', //设置端口号
//其实很简单的，只要配置这个参数就可以了
        proxy: {
'/aaa/*': {
                target: 'http://ccc.com:6080/',
                secure: false
            }
        }

    }
}

其中包括Babel的打包。

 

标签：

相关文章