我一直在尝试使用Webpack的不同功能,并且慢慢开始理解它们。
典型的控制台输出:
[WDS] App updated. Recompiling...
[WDS] App hot update...
[HMR] Checking for updates on the server...
[HMR] The following modules couldn't be hot updated: (They would need a full reload!)
[HMR] - 14
[HMR] Nothing hot updated.
[HMR] App is up to date.
无论更新哪个代码片段,JS、Stylus、模板等都会发生这种情况。所有内容都会经过转换(Babel、Stylus、Handlebars),但这并不重要。
如果有人想查看完整的源代码,我有一个 GitHub 项目:https://github.com/SimenB/webpack-fun。运行
npm install && npm start
即可。Webpack 配置:
'use strict';
var webpack = require('webpack');
var path = require('path');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer-core');
module.exports = {
context: path.resolve('./src'),
output: {
filename: 'kj-[hash].js'
},
recordsOutputPath: path.resolve('./records.json'),
resolve: {
alias: {
'common-assets': path.resolve('src', 'common'),
noop: path.resolve('src', 'common', 'scripts', 'noop')
}
},
module: {
loaders: [
{ test: /\.json$/, loader: 'json' },
{ test: /\.js$/, exclude: /node_modules/, loader: 'babel?optional=runtime' },
{ test: /\.styl$/, loader: ExtractTextPlugin.extract('style', 'css!postcss!stylus') },
{ test: /\.hbs$/, loader: 'handlebars', query: { inlineRequires: '\/images\/' } },
{ test: /\.png$/, loader: 'url?prefix=img/&limit=5000' },
{ test: /\.jpg$/, loader: 'url?prefix=img/&limit=5000' },
{ test: /\.woff(2)?$/, loader: 'url?prefix=font/&limit=5000' },
{ test: /\.eot$/, loader: 'file?prefix=font/' },
{ test: /\.ttf$/, loader: 'file?prefix=font/' },
{ test: /\.svg$/, loader: 'file?prefix=font/' }
]
},
plugins: [
new ExtractTextPlugin('kj-[contenthash].css'),
new webpack.optimize.LimitChunkCountPlugin({ maxChunks: 20 })
],
postcss: [ autoprefixer({ browsers: [ 'Chrome >= 33', 'IE >= 8' ] }) ]
};
Gulp任务
function devServer (project) {
var webpackConfig = require(path.resolve(CONFIG_FILENAME));
var webpackCore = webpack.core;
var webpackOptions = {
output: {
path: path.resolve('src', project, 'build')
},
debug: true,
devtool: '#source-map',
watchDelay: 200,
entry: [
'webpack-dev-server/client?http://0.0.0.0:8080',
'webpack/hot/only-dev-server',
'./' + project + '/scripts/index.js'
],
resolve: {
alias: {
'dev-module': 'common-assets/scripts/noop'
}
}
};
webpackConfig.plugins.push(new webpackCore.HotModuleReplacementPlugin());
webpackConfig.plugins.push(new webpackCore.NoErrorsPlugin());
webpackConfig.plugins.push(new HtmlWebpackPlugin({ template: 'src/common/index.html', title: 'KJ' }));
// Start a webpack-dev-server
var options = merge(webpackConfig, webpackOptions);
var compiler = webpackCore(options);
new WebpackDevServer(compiler, {
contentBase: webpackOptions.output.path,
hot: true,
inline: true,
proxy: {
'*': 'http://localhost:7021/' + project + '-webapp'
}
}).listen(8080, 'localhost', function (err) {
if (err) {
throw new gutil.PluginError('webpack-dev-server', err);
}
// Server listening
gutil.log('[webpack-dev-server]', 'http://localhost:8080/webpack-dev-server/');
});
}
gulp.task('webpack-dev-server:hpp', function () {
devServer('hpp');
});