webpack构建怎么打包源文件？

Question

为什么webpack打包只有output了js？
图片、css怎么没output？

webpack.config.js

var path = require('path');
var webpack = require('webpack');
var webpackDevServer = require('webpack-dev-server');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer');

module.exports = {
  entry: {
    index: './js/index.js'
  },
  output: {
    path: path.resolve(__dirname, './dist'),
    publicPath: '/dist/',
    filename: '[name].js'
  },
  module: {
    loaders: [
      {
         test: /\.css$/,
        //  loader: 'style-loader!css-loader'
         loader: ExtractTextPlugin.extract('style-loader', 'css-loader!postcss-loader')
      },
      {
        test: /\.scss$/,
        loader: 'style!css!sass?sourceMap!postcss'
        // loader: ExtractTextPlugin.extract('style-loader', 'css!sass')
      },
      {
        test: /\.js$/,
        loader: 'babel',
        query: {
          presets: ['es2015']
        },
        exclude: /node_modules/
      },
      {
        test: /\.(png|jpg|gif|svg)$/,
        loader: 'file',
        options: {
          name: '[name].[ext]?[hash]'
        }
      }
    ]
  },
  devServer: {
    contentBase: './', // 指定本地服务器所加载的页面目录
    colors: true, // 设置为true，使终端输出的文件为彩色
    historyApiFallback: true, // 如果设置为true，所有的跳转将指向index.html
    inline: true, // 设置为true，当源文件改变时会自动刷新页面
    hot: true,
    process: true,
    port: '8080' // 设置默认监听端口，如果省略，默认为”8080“
  },
  devtool: '#eval-source-map',
  postcss: [
    require('autoprefixer')
  ],
  plugins: [
    new webpack.HotModuleReplacementPlugin(),
    new webpack.optimize.OccurenceOrderPlugin(),
    new ExtractTextPlugin('[name].css')
  ]
}

if (process.env.NODE_ENV === 'production') {
  module.exports.devtool = '#source-map'
  module.exports.plugins = (module.exports.plugins || []).concat([
    new webpack.DefinePlugin({
      'process.env': {
        NODE_ENV: '"production"'
      }
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      }
    })
  ])
}

package.json

  "dev": "cross-env NODE_ENV=development webpack-dev-server --open --inline --hot",
  "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"

index.js

import '../css/common.scss';
import '../css/index.scss';

Answer 1

webpack的核心只管js，css啊图片啊字体文件啊之类的要靠loader来输出，看下面这两篇文章：

• 《webpack多页应用架构系列（五）：听说webpack连less/css也能打包？》

• 《webpack多页应用架构系列（六）：听说webpack连图片和字体也能打包？》

Answer 2

简单来说就是webpack打包出来的css都是js方式添加到页面中去的，看上面array_huang给出的教程5里面，用ExtractTextPlugin来获得css形式的文件