webpack实现scss编译配置

1、webpack.start.js:

var webpack = require('webpack');
var SpritesmithPlugin = require('webpack-spritesmith');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var templateFunction = function(data) {
    var perSprite = data.sprites.map(function(sprite) {
        var $name = sprite.name,
            $width = parseInt(sprite.px.width) / 2 + 2,
            $height = parseInt(sprite.px.height) / 2 + 2,
            $ofx = parseInt(sprite.px.offset_x) / 2 + 1,
            $ofy = parseInt(sprite.px.offset_y) / 2 + 1,
            $tw = sprite.total_width / 2,
            $th = sprite.total_height / 2;
        return '.bg-N { background-image: url(I);width: Wpx; height: Hpx; background-position: Xpx Ypx; background-size:Mpx,Npx;background-repeat:no-repeat;display:inline-block;}'
            .replace('N', $name)
            .replace('I', data.sprites[0].image)
            .replace('W', $width)
            .replace('H', $height)
            .replace('X', $ofx)
            .replace('Y', $ofy)
            .replace('M', $tw)
            .replace('N', $th);
    }).join('\n');
    return perSprite;
};

var config = {
    entry: {
        app: ["./system.js"]  //导入入口文件
    },
    output: { //输出目录
        path: __dirname,
        publicPath: "",
        filename: 'css.bundle.js',
    },
    module: {
        loaders: [{
            test: /\.jsx?$/,
            use: 'babel-loader?presets[]=react,presets[]=es2015',
            exclude: /node_modules/
        }, {
            test: /\.scss$/,   //变异scss
            use: ExtractTextPlugin.extract({
                fallback: "style-loader",
                loader: "css-loader!autoprefixer-loader?{browsers:['last 6 Chrome versions', 'last 3 Safari versions', 'iOS >= 5', 'Android >= 4.0']}!sass-loader",
            }),
        }, {
            test: /\.png$/,
            use: [
                'file-loader?name=../img/[name].[ext]'
            ]
        }]
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        new ExtractTextPlugin('css/style.css'),  //独立抽出编译后的css
        new SpritesmithPlugin({
            src: {
                cwd: path.resolve(__dirname, 'img/icon'),
                glob: '*.png'
            },
            target: {
                image: path.resolve(__dirname, 'img/sprite.png'),
                css: [
                    [path.resolve(__dirname, 'scss/_bg.scss'), {
                        format: 'function_based_template'
                    }]
                ]
            },
            customTemplates: {
                'function_based_template': templateFunction,
            },
            apiOptions: {
                cssImageRef: "../img/sprite.png"
            },
            spritesmithOptions: {
                padding: 20
            }
        }),
        /*new HtmlWebpackPlugin({
            title: 'index',
            hash:true,
            template: 'index.ejs', // Load a custom template (ejs by default see the FAQ for details)
        })*/
    ]
};
module.exports = config;

2、webpack.build.js:

var webpackUglifyJsPlugin = require('webpack-uglify-js-plugin');
var path = require('path');
var startConfig = require('./webpack.start.js');
startConfig.plugins.push(new webpackUglifyJsPlugin({  //生产版webpack配置多了压缩插件，这样可以使用css编译后的东西更小
    cacheFolder: path.resolve(__dirname, 'public/cached_uglify/'),
    debug: true,
    minimize: true,
    sourceMap: false,
    output: {
        comments: false
    },
    compressor: {
        warnings: false
    }
}));
var buildConfig=startConfig;
module.exports = buildConfig;

3、server.js:

var config = require("./webpack.start.js");
var webpack = require('webpack');
var WebpackDevServer = require('webpack-dev-server');

config.entry.app.unshift("webpack-dev-server/client?http://0.0.0.0:8089/");

var compiler = webpack(config);  //运行webpack
var server = new WebpackDevServer(compiler, { //运行webpack.dev.server
    publicPath: config.output.publicPath,
    stats: {
        host:'0.0.0.0',
        colors: true,
        hot:true,
        progress:true,
    }
});
server.listen(8089);

4、system.js:

import "./css/style.scss"; //导入样式文件，这样webpack就可以编译scss文件了