最近搞了一个webpack4+typescript的开发环境，折腾了很久现在记录一下。。

本身环境比较好搞，但是热更新是个麻烦事儿

本环境是基于webpack-dev-server搭建的

 output: {
 publicPath: '/dist',
 path: path.resolve(__dirname, 'dist'),
 filename: 'ljax.bundle.js',
 hotUpdateChunkFilename: 'hot/hot-update.js',
 hotUpdateMainFilename: 'hot/hot-update.json'
 },

publicPath是必须的字段，不添加HRM就没有效果

在热更新的时候会出现很多hot-update.js和hot-update.json的细碎文件

使用hotUpdateChunkFilename和hotUpdateMainFilename指定他们只生成一个文件，目前没有找到不生成这两个文件的办法，如果哪位大佬知道的话请告知。

plugins: [
 new HtmlWebpackPlugin({
 title: '模块热替换',
 template: './public/index.html'
 }),
 new webpack.HotModuleReplacementPlugin(),
 // 启动

输出清理 new FriendlyErrorsWebpackPlugin({ compilationSuccessInfo: { messages: [`You application is running here ${HTTPS ? 'https' : 'http'}://${HOST}:${PORT}`], // notes: ['Some additional notes to be displayed upon successful compilation'], clearConsole: true }, }) ],

HotModuleReplacementPlugin是热更新必不可少的插件

 contentBase: __dirname,
 quiet: true,
 compress: true,
 port: PORT,
 host: HOST,
 https: HTTPS,
 // hot: true,
 // hotOnly: true,
 // inline: true,
 open: true,
 overlay: true,
 openPage: './dist/index.html'

最坑的地方来了，我一开始是加上可hot和hotOnly字段的，但是不管是两个都加还是单独使用任何一个，HRM都没有效果。。

最后发现两个都不实用就可以。。。妈耶，我还是从官网看的这个配置。

到现在也不是很了解是怎么回事。

最后，贴一下完整的配置吧

webpack.config.js

const path = require('path')
const FriendlyErrorsWebpackPlugin = require('friendly-errors-webpack-plugin')
const webpack = require('webpack')
const HtmlWebpackPlugin = require('html-webpack-plugin')

const HOST = 'localhost'
const PORT = 8080
const HTTPS = false

module.exports = {
 mode: 'development',

 context: __dirname,

 entry: {
 app: './src/index.ts'
 },

 output: {
 publicPath: '/dist',
 path: path.resolve(__dirname, 'dist'),
 filename: 'ljax.bundle.js',
 hotUpdateChunkFilename: 'hot/hot-update.js',
 hotUpdateMainFilename: 'hot/hot-update.json'
 },

 module: {
 rules: [
 { test: /\.ts/, use: 'ts-loader', exclude: /node_modules/ }
 ]
 },

 resolve: {
 extensions: ['.ts', '.js']
 },

 plugins: [
 new HtmlWebpackPlugin({
 title: '模块热替换',
 template: './public/index.html'
 }),
 new webpack.HotModuleReplacementPlugin(),
 // 启动

输出清理 new FriendlyErrorsWebpackPlugin({ compilationSuccessInfo: { messages: [`You application is running here ${HTTPS ? 'https' : 'http'}://${HOST}:${PORT}`], // notes: ['Some additional notes to be displayed upon successful compilation'], clearConsole: true }, }) ], devServer: { contentBase: __dirname, quiet: true, compress: true, port: PORT, host: HOST, https: HTTPS, // hot: true, // hotOnly: true, // inline: true, open: true, overlay: true, openPage: './dist/index.html' } }

package.json

{
 "name": "ljax",
 "version": "1.0.0",
 "description": "",
 "main": "index.js",
 "scripts": {
 "test": "echo \"Error: no test specified\" && exit 1",
 "watch": "webpack -w",
 "dev-server": "webpack-dev-server",
 "serve": "start yarn dev-server && yarn watch"
 },
 "author": "",
 "license": "ISC",
 "dependencies": {
 "friendly-errors-webpack-plugin": "^1.7.0",
 "html-webpack-plugin": "^3.2.0",
 "ts-loader": "^6.0.4",
 "typescript": "^3.5.3",
 "webpack": "^4.39.1",
 "webpack-dev-server": "^3.7.2"
 },
 "devDependencies": {
 "webpack-cli": "^3.3.6"
 }
}

下载本文