这是我的webpack.config.js文件:
$('#feed > .feed-item').slice(-1 * arr[0]).fadeOut(1000, function(){
$(this).remove();
});
这是我运行webpack-dev-server的脚本:
const webpack = require('webpack');
const path = require('path');
module.exports = {
cache: true,
devtool: 'source-map',
entry: {
app : [
'./src/index.js'
],
vendor: ['lodash']
},
output: {
filename: 'bundle.js',
path: path.join(__dirname, 'dist'),
publicPath: '/dist/',
pathinfo: true
},
module: {
loaders: [
{ test: /\.js$/, exclude: /node_modules/, loaders: ['babel'] },
{ test: /\.scss/, exclude: /node_modules/, loaders: ['style', 'css', 'sass'] }
]
},
plugins: [
new webpack.NoErrorsPlugin(),
new webpack.optimize.CommonsChunkPlugin('vendor', 'vendor.bundle.js', Infinity)
]
};
const webpack =require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const webpackConfig = require('../webpack.config');
const _ = require('lodash');
const webpackDevConfig = _.cloneDeep(webpackConfig);
const devPort = 3000;
webpackDevConfig.entry.app.unshift('webpack/hot/dev-server');
webpackDevConfig.entry.app.unshift('webpack-dev-server/client?http://localhost:' + devPort + '/');
webpackDevConfig.plugins.push(new webpack.HotModuleReplacementPlugin());
new WebpackDevServer(webpack(webpackDevConfig), {
publicPath: webpackConfig.output.publicPath,
hot: true,
stats: {
colors: true,
chunks: false
}
}).listen(devPort, 'localhost');
命令输出正常(bundle.js和vendor.bundle.js),但是,dev服务器失败并显示webpack
(尽管其内存中编译成功)。
从webpack.config.js中删除webpackJsonp is not defined
时 - 一切正常:
CommonsChunkPlugin
有什么想法吗?
答案 0 :(得分:15)
在 index.html 文件中,只需在 bundle.js
之前调用 vendor.bundle.js<script src="assets/js/vendor.bundle.js"></script>
<script src="assets/js/bundle.js"></script>
这就是全部,现在它应该有效。 More information.
答案 1 :(得分:1)
将供应商入口点重命名为
'vendor.js':['lodash']
答案 2 :(得分:0)
为了扩展这个概念,供应商必须先来,因为运行时包含在那里(因为所有的webpacking,所有定义了在客户端加载期间运行的所有变量和方法)。
如果您使用清单文件(因为分块等),您必须首先放置它,因为它将包含运行时,因为模块的构建方式。