1、webpack.config.js配置文件为：

//处理共用、通用的js
var webpack = require('webpack'); //处理html模板
var htmlWebpackPlugin = require('html-webpack-plugin'); //css单独打包
var ExtractTextPlugin = require("extract-text-webpack-plugin"); // 获取html-webpack-plugin参数的方法 
var getHtmlConfig = function(name, title) { return { //本地模板文件的位置
        template: './src/view/' + name + '.html', //输出文件的目录和文件名称
        filename: 'view/' + name + '.html', //添加特定favicon路径到输出的html文档中
        favicon: './favicon.ico', //生成的html文档的标题
 title: title, //向template或者templateContent中注入所有静态资源，不同的配置值注入的位置不经相同。true或者body：所有java script资源插入到body元素的底部
        inject: true, //是否为所有注入的静态资源添加webpack每次编译产生的唯一hash值
        hash: true, //允许插入到模板中的一些chunk，不配置此项默认会将entry中所有的thunk注入到模板中。在配置多个页面时，每个页面注入的thunk应该是不相同的，需要通过该配置为不同页面注入不同的thunk；
        chunks: ['common', name] }; }; var config = { //多页面配置
 entry: { //通用模块
        'common': ['./src/page/common/index.js'], //登录模块
        'login': ['./src/page/login/index.js'], //首页
        'index': ['./src/page/index/index.js'] }, output: { //打包后文件存放的地方
        path: __dirname + '/dist', //打包后的文件名
        filename: 'js/[name].js' }, //将外部变量或者模块加载进来，并且不将外部变量或者模块编译进文件中
 externals: { 'jquery': 'window.jQuery' }, module: { loaders: [ //编译ES6
 { test: /\.js$/, //以下目录不处理
                exclude: /node_modules/, //处理以下目录
                include: /src/, loader: "babel-loader?cacheDirectory", //配置的目标运行环境自动启用需要的 babel 插件
 query: { presets: ['latest'] } }, //处理css
 { test: /\.css$/, //css单独打包
 use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [{ loader: 'css-loader', options: { //支持@important引入css
                                importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效
                                        require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } } ] }) }, //处理less（同理sass）
 { test: /\.less$/, //css单独打包
 use: ExtractTextPlugin.extract({ fallback: "style-loader", use: [{ loader: 'css-loader', options: { //支持@important引入css
                                importLoaders: 1 } }, { loader: 'postcss-loader', options: { plugins: function() { return [ //一定要写在require("autoprefixer")前面，否则require("autoprefixer")无效
                                        require('postcss-import')(), require("autoprefixer")({ "browsers": ["Android >= 4.1", "iOS >= 7.0", "ie >= 8"] }) ] } } }, 'less-loader' ] }) }, //处理图片
 { test: /\.(gif|png|jpg|woff|svg|eot|ttf)\??.*$/i, loaders: [ //小于8k的图片编译为base64，大于10k的图片使用file-loader 
                    'url-loader?limit=8192&name=img/[name]-[hash:5].[ext]', //图片压缩
                    'image-webpack-loader' ] } ] }, plugins: [ //html模板处理
        new htmlWebpackPlugin(getHtmlConfig('index', '首页')), new htmlWebpackPlugin(getHtmlConfig('login', '登录页')), //通用模块编译到js/common.js
        new webpack.optimize.CommonsChunkPlugin({ //公共块的块名称
            name: 'common', //生成的文件名
            filename: 'js/common.js' }), //css单独打
        new ExtractTextPlugin('css/[name].css') ] } module.exports = config;

 

2、package.json文件为：

{ "name": "webpack", "version": "1.0.0", "main": "bundle.js", "scripts": { "test": "echo \"Error: no test specif