1、演示效果
2、webpack多入口配置
2.1在webpack.config.js中配置entry
var webpack = require('webpack');
var path = require('path');
//公共文件打包到common.js中
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js',['main','login']);
module.exports = {
cache: true,
entry: {
//登陆后进入的主页面
main: './src/index.js',
//登录页面
login:'./src/login.js',
},
output: {
//输出到公共文件public/build下
path: path.resolve(__dirname, 'public/build'),
//名称也就是对应的main.js和login.js
filename: '[name].js',
},
module: {
loaders: [
{
test: /\.jsx?$/,
loader: 'babel',
exclude: /(node_modules|bower_components)/,
query: {
presets: ['react', 'es2015', 'stage-0']
}
},
{
test: /\.css$/,
loader: 'style-loader!css-loader'
},
{
test: /\.(png|jpg)$/,
loader: 'url-loader?limit=8192'
},
{
test: /\.(woff|eot|ttf|svg)$/, // Have to configure fonts loaders for the generated fonts,视频播放中出现的文字样式不识别
loader: 'url',
}
]
},
resolve: {
extensions: ['', '.js', '.jsx', '.css', '.json'],
},
plugins: [
//动态刷新引擎
new webpack.HotModuleReplacementPlugin(),
new webpack.NoErrorsPlugin(),
// 公共文件打包引擎
commonsPlugin
]
};