版权声明：更多文章请访问我的个人站 ，转载请注明出处。

这里没什么可说的，webpack的配置和插件实在太多了，用的时候查文档就行了。

项目地址：

这里 先贴 个我的配置，注释写的挺详细的了。

开发环境的webpack配置：

var path = require('path');var webpack = require('webpack');var TransferWebpackPlugin = require('transfer-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');var localOptions = require('./localOptions');var entrys = require('./entrys.js');module.exports = {    entry: entrys,    output: {        path: path.resolve(__dirname, './dist'),        publicPath: localOptions.host,        filename: 'Scripts/[name].js'    },    devtool: 'eval-source-map',    module: {        rules: [            {test: /\.js$/,loader:'babel-loader'},            {test: /\.pug$/,loader:'pug-loader',options: {pretty: true}},            {test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader',{loader: 'postcss-loader',options: {config: {path: './build/postcss.config.js'}}},'sass-loader']})},        ]    },    plugins: [        new webpack.BannerPlugin('Copyright 2017 Keyon Y'),        //把指定文件夹下的文件复制到指定的目录        new TransferWebpackPlugin([                {from: '../src/assets', to: '../dist/assets'},            ],path.resolve(__dirname)),        // webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块        new webpack.optimize.OccurrenceOrderPlugin(),        new webpack.HotModuleReplacementPlugin(),        new ExtractTextPlugin({filename:'Contents/[name].css',disable: true,allChunks: true}),        // 允许错误不打断程序        new webpack.NoErrorsPlugin()    ]}

生产环境的webpack配置：

var path = require('path');var webpack = require('webpack');var TransferWebpackPlugin = require('transfer-webpack-plugin');var ExtractTextPlugin = require('extract-text-webpack-plugin');var entrys = require('./entrys.js');module.exports = {    entry: entrys,    output: {        path: path.resolve(__dirname, '../dist'),        publicPath: '/',        filename: 'Scripts/[name].js'    },    module: {        rules: [            {test: /\.js$/,loader:'babel-loader'},            {test: /\.pug$/,loader:'pug-loader',options: {pretty: true}},            {test: /\.scss$/,use: ExtractTextPlugin.extract({fallback: 'style-loader', use: ['css-loader',{loader: 'postcss-loader',options: {config: {path: './build/postcss.config.js'}}},'sass-loader']})}        ]    },    plugins: [        new webpack.BannerPlugin('Copyright 2017 Keyon Y'),        //把指定文件夹下的文件复制到指定的目录        new TransferWebpackPlugin([                {from: '../src/assets', to: '../dist/assets'},                {from: '../src/Views', to: '../dist/Views'},            ],path.resolve(__dirname)),        // webpack就能够比对id的使用频率和分布来得出最短的id分配给使用频率高的模块        new webpack.optimize.OccurrenceOrderPlugin(),        new ExtractTextPlugin({filename:'Contents/[name].css',disable: false,allChunks: true}),        // 混淆压缩js和css        new webpack.optimize.UglifyJsPlugin({            compress: {                properties: false,                warnings: false            },            output: {                beautify: false,                quote_keys: true            },            mangle: {                screw_ie8: false            },            sourceMap: false,            except: ['$', 'exports', 'require']    //排除关键字        })    ],    stats: 'normal'}

entry的配置，因为有太多的组件('src/Components'中)了，所以为了简化webpack.config的内容，我把entry的配置写在entry.js作为一个模块导入进来。

// entry.jsvar webpackHotMiddlewareScript = 'webpack-hot-middleware/client?reload=true&timeout=2000';    //reload=true的意思是，如果碰到不能hot reload的情况，就整页刷新var isDev = process.env.NODE_ENV === 'dev';var entryJson = {    base: './src/Components/base/base.js',    index: './src/Components/index/index.js',   // 首页--Default 路由    message: './src/Components/message/message.js',    home: './src/Components/home/home.js',    modals: './src/Components/modals/modals.js',}if(isDev) { // 开发环境中使用了webpack-hot-middleware，需要将每一个entry的配置中写上'webpack-hot-middleware/client?reload=true&timeout=2000'    var transJson = {};    for(let e in entryJson) {        transJson[e] = [entryJson[e], webpackHotMiddlewareScript];    }    module.exports = transJson;}else {    module.exports = entryJson;}

欢迎继续关注本博的更新