[原创] webpack使用-入门篇(三)

js webpack

2016-08-27 1447

使用的插件说明:

CommonsChunkPlugin 提取公共的js内容放置在单独的文件中 

HotModuleReplacementPlugin 支持js文件修改后的实时编译 

DashboardPlugin 让命令后看起来高大上,无它用

var path = require('path');
var webpack = require('webpack');
    ////提取公用插件
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');

var Dashboard = require('webpack-dashboard');
var DashboardPlugin = require('webpack-dashboard/plugin');
var dashboard = new Dashboard();

module.exports = {
    entry: [
        // 'webpack/hot/dev-server',
        // 'webpack-dev-server/client?http://localhost:8888',
        './app/app.js'
    ],
    resolve: {
        extensions: ['', '.js','.html']
    },
    output: {
        path: path.resolve(__dirname, 'bundle'),
        filename: "bundle.js",
        publicPath: "bundle/",
    },
    plugins: [
        new webpack.HotModuleReplacementPlugin(),
        commonsPlugin,
        new DashboardPlugin(dashboard.setData)
    ],
    module: {
        loaders: [{
                test: /\.html$/,
                exclude: /node_modules/,
                loader: 'html-loader'
            },
            // 此项配置暂时有问题 无法实现效果
            {
              test:/\.jsx?$/,
              exclude:/node_modules/,
              loader:'babel',
              query: {
                presets: ['es2015']
              }
            }
        ]
    }
};