new-react/config/webpack.config.js

react + es6 + less + webpack + redux

// webpack.config.js

var webpack = require('webpack')

// 辅助函数
var utils = require('./utils')
var fullPath = utils.fullPath
var pickFiles = utils.pickFiles

// 项目根目录
var ROOT_PATH = fullPath('../')
// 项目源码路径
var STATIC_PATH = ROOT_PATH + '/static'
// 产出目录
var DIST_PATH = ROOT_PATH + '/dist'
// 使用缓存
var CACHE_PATH = ROOT_PATH + '/cache'

// 是否是开发环境
var __DEV__ = process.env.NODE_ENV !== 'production'

var HtmlWebpackPlugin = require('html-webpack-plugin')

var autoprefixer = require('autoprefixer')

// conf
var alias = pickFiles({
    id: /(conf\/[^\/]+).js$/,
    pattern: STATIC_PATH + '/conf/*.js'
})

// components
alias = Object.assign(alias, pickFiles({
    id: /(components\/[^\/]+)/,
    pattern: STATIC_PATH + '/components/*/index.js'
}))

// reducers
alias = Object.assign(alias, pickFiles({
    id: /(reducers\/[^\/]+).js/,
    pattern: STATIC_PATH + '/js/reducers/*'
}))

// actions
alias = Object.assign(alias, pickFiles({
    id: /(actions\/[^\/]+).js/,
    pattern: STATIC_PATH + '/js/actions/*'
}))

var config = {
    context: STATIC_PATH,
    entry: {
        app: ['./app.js'],
        lib: ['react', 'react-dom', 'react-router', 'redux', 'react-redux', 'redux-thunk']
    },
    output: {
        path: DIST_PATH,
        filename: 'js/[name].[hash].js'
    },
    module: {
        loaders: [{
            test: /\.js$/,
            exclude: /node_modules/,
            include: STATIC_PATH,
            loaders: ['babel-loader?cacheDirectory=' + CACHE_PATH]
        }, {
            test: /\.(less|css)$/,
            use: [
                'style-loader',
                'css-loader',
                'postcss-loader',
                'less-loader'
            ]
        }, {
            test: /\.(?:jpg|gif|png|svg)$/,
            loaders: [
                'url-loader?limit=8000&name=img/[hash].[ext]',
                'image-webpack-loader'
            ]
        }]
    },
    resolve: {
        alias: alias
    },
    plugins: [
        new webpack.DefinePlugin({
            "process.env.NODE_ENV": JSON.stringify(process.env.NODE_ENV || 'development')
        }),
        new HtmlWebpackPlugin({
            filename: 'index.html',
            chunks: ['app', 'lib'],
            template: STATIC_PATH + '/app.html'
        }),
        new webpack.optimize.CommonsChunkPlugin({
            name: 'lib',
            filename: 'js/lib.js'
        }),
        new webpack.LoaderOptionsPlugin({
            test: /\.(less|css)$/,
            options: {
                postcss: [autoprefixer({browsers: ['last 2 versions']})]
            }
        })
    ]
}

// css autoprefix
// config.postcss = function () {
//     return [precss, autoprefixer]
// }

module.exports = config