webpack打包sass

首先，需要支持sass，不管是有ruby环境的sass，还是node-sass，用npm装的sass模块，bootstrap-sass，gulp-sass。。总归要有一个吧！（这里采用node-sass）

其次，还需要webpack的sass-loader，让loader起作用的方法：

要么给scss 文件做个独立entry，
要么在现在entry（或它的依赖）里import 你的scss 文件，
要么在主模块ts文件中require 需要的 scss文件。
不然scss 的loader 都识别不了scss 文件。

然后，配置plugins和loaders

var webpack = require('webpack');
var autoprefixer = require('autoprefixer');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
  entry: {
        main:['./app/main.ts','./app/sass/main-1.scss','./app/sass/main-a.scss','./app/sass/main2.scss'],
//入口中多个 css或者 scss都会被 allChunks: true 设置成打包到一个css文件，
//比如此处的 main-1.scss,main-a.scss,main2.scss都会被打包成 main.css
        vendor:[

        ]
  },
  externals:{
    "jquery":"jQuery"
  },
  output: {
    path: './dist',
    filename: 'js/app.bundle.js',
    publicPath:'/'
  },
  module: {
    loaders: [
      {test: /\.ts$/, loader: 'ts'},
      {test: /\.html$/, loader: 'raw'},
      {test: /\.css$/, loader: ExtractTextPlugin.extract('style', 'css!postcss')},
      {test: /\.scss$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader")}
    ]
  },
  postcss: [autoprefixer()],
  resolve: {
    extensions: ['', '.js', '.ts', '.scss']
  },
  plugins: [
    new ExtractTextPlugin("assets/css/[name].css", {publicPath: '/assets/',allChunks: true}),
//ExtractTextPlugin.extract 第二个参数(或拆分为多个参数)中 loader 的执行顺序是从右到左，
//即先对引入的 .sass 使用 sass loader 得到编译后的 css 再使用 css-loader 按照正常 css-loader 的方式处理。
//sass-loader的”-loader"是可以省略的，所以会看到很多人写的config里面全是"css!sass"什么的，用！分隔。
    new HtmlWebpackPlugin({template: './app/index.html'}),
    new webpack.optimize.CommonsChunkPlugin({
        name: "vendor",
        //filename : 'vendor_[chunkhash].js',
        filename : 'js/vendor.js',
        minChunks: Infinity
    }),
    /*new webpack.optimize.UglifyJsPlugin({
        compress: {
            warnings: false
        }
    }),*/
    new webpack.DefinePlugin({
      app: {
        environment: JSON.stringify(process.env.APP_ENVIRONMENT || 'development')
      }
    })
  ]

};

ExtractTextPlugin.extract([notExtractLoader], loader, [options]) //路径文件名都是options里的 

最后，npm start启动webpack进行打包。

参考webpack文档：http://webpack.github.io/docs/stylesheets.html#separate-css-bundle

参考npm ExtractTextPlugin文档:https://www.npmjs.com/package/extract-text-webpack-plugin

更多webpack实用配置：https://segmentfault.com/a/1190000005866410

关于 webpack sass-loader 的url问题: https://segmentfault.com/q/1010000006842394/a-1020000006843757

各种loader综合解析：https://segmentfault.com/a/1190000002551952