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); //运行webpackvar 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文件了