Node中間層實踐（三）——webpack配置

版權聲明：更多文章請訪問個人我的站 Keyon Y，轉載請註明出處。

這裏沒什麼可說的，webpack的配置和插件實在太多了，用的時候查文檔就好了。

項目地址：https://github.com/KeyonY/NodeMiddle

這裏 先貼 個個人配置，註釋寫的挺詳細的了。

開發環境的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.js
var 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;
}

歡迎繼續關注本博的更新
Node中間層實踐（一）——基於NodeJS的全棧式開發
Node中間層實踐（二）——搭建項目框架
Node中間層實踐（三）——webpack配置
Node中間層實踐（四）——模板引擎pug
Node中間層實踐（五）——express-中間層的邏輯處理