前端工程搭建入门(二)启动devServer,支持热更新
2018-07-20 本文已影响0人
文者字清
配置
const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
entry: {
index: './src/index.js',
},
output: {
path: __dirname + '/release',
filename: './bundle.js'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules)/,
loader: 'babel-loader'
},
{
test: /\.html$/,
loader: 'html-loader'
}
],
},
plugins: [
new HtmlWebpackPlugin({
template: 'template/index.html'
}),
new webpack.HotModuleReplacementPlugin()
],
devServer: {
contentBase: path.join(__dirname, 'release'),
port: 9000,
hotOnly:true
}
};
注意点
- 安装 webpack-dev-server 包时要注意版本兼容
webpack 3 ----> webpack-dev-server 2.x
webpack 4 ----> webpack-dev-server 3.x
- devServer 开启热更新(热更新的配置方式有很多种,只说一下最简单 _)
- 在devServer 的配置项里添加一个配置
hotOnly:true
- 此时还需要一个 plugin ,在plugins里添加
new webpack.HotModuleReplacementPlugin()
,
- 在devServer 的配置项里添加一个配置
这样就可以在改完代码时,直接查看页面效果了