1. webpackJsonp is not defined？
原因：用了CommonsChunkPlugin生成了公共文件，但在页面引入生成的公共文件，并且要在其他文件之前引入
2. 怎么理解webpack中的output.filename 和output.chunkFilename[1]
filename应该比较好理解，就是对应于entry里面生成出来的文件名。比如：
{
entry: {
"index": "pages/index.jsx"
},
output: {
filename: "[name].min.js",
chunkFilename: "[name].min.js"
}
}
生成出来的文件名为index.min.js。
chunkname我的理解是未被列在entry中，却又需要被打包出来的文件命名配置。
什么场景需要呢？在按需加载（异步）模块的时候，这样的文件是没有被列在entry中的，如使用CommonJS的方式异步加载模块：
require.ensure(["modules/tips.jsx"], function(require) {
var a = require("modules/tips.jsx");
// ...
}, 'tips');
异步加载的模块是要以文件形式加载哦，所以这时生成的文件名是以chunkname配置的，生成出的文件名就是tips.min.js。
（require.ensure() API的第三个参数是给这个模块命名，否则chunkFilename: "[name].min.js"中的[name]是一个自动分配的、可读性很差的id，这是在文档很不起眼的地方1.6K发现的。。。）
3.webpack多页面怎么使用?[2]
主要配置：
pligins:[
new ExtractTextPlugin('css/[name].css'),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
filename: './view/index.html', //生成的html存放路径，相对于path
template: './src/view/index.html', //html模板路径
hash: true, //为静态资源生成hash值
chunks: ['vendors', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
}),
]
完整配置：
var path = require('path')
var webpack = require('webpack')
/*
extract-text-webpack-plugin插件，
有了它就可以将你的样式提取到单独的css文件里，
妈妈再也不用担心样式会被打包到js文件里了。
*/
var ExtractTextPlugin = require('extract-text-webpack-plugin');
/*
html-webpack-plugin插件，重中之重，webpack中生成HTML的插件，
具体可以去这里查看https://www.npmjs.com/package/html-webpack-plugin
*/
var HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: { //配置入口文件，有几个写几个
index: './src/js/page/index.js',
list: './src/js/page/list.js',
about: './src/js/page/about.js',
},
output: {
path: path.join(__dirname, 'dist'), //输出目录的配置，模板、样式、脚本、图片等资源的路径配置都相对于它
publicPath: '/dist/', //模板、样式、脚本、图片等资源对应的server上的路径
filename: 'js/[name].js', //每个页面对应的主js的生成配置
chunkFilename: 'js/[id].chunk.js' //chunk生成的配置
},
module: {
loaders: [ //加载器，关于各个加载器的参数配置，可自行搜索之。
{
test: /\.css$/,
//配置css的抽取器、加载器。'-loader'可以省去
loader: ExtractTextPlugin.extract('style-loader', 'css-loader')
}, {
test: /\.less$/,
//配置less的抽取器、加载器。中间!有必要解释一下，
//根据从右到左的顺序依次调用less、css加载器，前一个的输出是后一个的输入
//你也可以开发自己的loader哟。有关loader的写法可自行谷歌之。
loader: ExtractTextPlugin.extract('css!less')
}, {
//html模板加载器，可以处理引用的静态资源，默认配置参数attrs=img:src，处理图片的src引用的资源
//比如你配置，attrs=img:src img:data-src就可以一并处理data-src引用的资源了，就像下面这样
test: /\.html$/,
loader: "html?attrs=img:src img:data-src"
}, {
//文件加载器，处理文件静态资源
test: /\.(woff|woff2|ttf|eot|svg)(\?v=[0-9]\.[0-9]\.[0-9])?$/,
loader: 'file-loader?name=./fonts/[name].[ext]'
}, {
//图片加载器，雷同file-loader，更适合图片，可以将较小的图片转成base64，减少http请求
//如下配置，将小于8192byte的图片转成base64码
test: /\.(png|jpg|gif)$/,
loader: 'url-loader?limit=8192&name=./img/[hash].[ext]'
}
]
},
plugins: [
new webpack.ProvidePlugin({ //加载jq
$: 'jquery'
}),
new webpack.optimize.CommonsChunkPlugin({
name: 'vendors', // 将公共模块提取，生成名为`vendors`的chunk
chunks: ['index','list','about'], //提取哪些模块共有的部分
minChunks: 3 // 提取至少3个模块共有的部分
}),
new ExtractTextPlugin('css/[name].css'), //单独使用link标签加载css并设置路径，相对于output配置中的publickPath
//HtmlWebpackPlugin，模板生成相关的配置，每个对于一个页面的配置，有几个写几个
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: './view/index.html', //生成的html存放路径，相对于path
template: './src/view/index.html', //html模板路径
inject: 'body', //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['vendors', 'index'],//需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: './view/list.html', //生成的html存放路径，相对于path
template: './src/view/list.html', //html模板路径
inject: true, //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['vendors', 'list'],//需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
}),
new HtmlWebpackPlugin({ //根据模板插入css/js等生成最终HTML
favicon: './src/img/favicon.ico', //favicon路径，通过webpack引入同时可以生成hash值
filename: './view/about.html', //生成的html存放路径，相对于path
template: './src/view/about.html', //html模板路径
inject: true, //js插入的位置，true/'head'/'body'/false
hash: true, //为静态资源生成hash值
chunks: ['vendors', 'about'],//需要引入的chunk，不配置就会引入所有页面的资源
minify: { //压缩HTML文件
removeComments: true, //移除HTML中的注释
collapseWhitespace: false //删除空白符与换行符
}
}),
new webpack.HotModuleReplacementPlugin() //热加载
],
//使用webpack-dev-server，提高开发效率
devServer: {
contentBase: './',
host: 'localhost',
port: 9090, //默认8080
inline: true, //可以监控js变化
hot: true, //热启动
}
};
-
引自React China社区 biqing的回答。 ↩
-
问题来源：知乎，回答引自GitHub 基于webpack1.x的多页站点。 ↩