webpack 給css添加前綴

環境是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的打包。