方法一
第一步
npm install webpack-dev-server
第二步
配置 webpack.config.js 文件
const path = require('path')
const webpack = require('webpack') // 引入 webpack
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
publicPath: '/dist' // 必须加 publicPath
},
module: {
rules: [
{test: /\.js$/, use: 'babel-loader'}
]
},
plugins: [
// new webpack.HotModuleReplacementPlugin() // 生成热更新文件,文件会有很多 不建议加上。或者用一个清除插件,清除这些文件
],
devServer: {
contentBase: path.resolve(__dirname, './'),
port: 8088,
inline: true,
hot: true, // 热加载
// hotOnly: true, // 只热加载,不更新页面
open: true // 自动浏览器打开
}
}
第三步
输入命令行语句
npx webpack-dev-server
方法二
第一步
npm install webpack-dev-server
npm install html-webpack-plugin
第二步
配置 webpack.config.js 文件
const path = require('path')
const webpack = require('webpack') // 引入 webpack
const HtmlWebpackPlugin = require('html-webpack-plugin') // 引入 html-webpack-plugin
module.exports = {
entry: './src/index.js',
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist'),
},
module: {
rules: [
{test: /\.js$/, use: 'babel-loader'}
]
},
plugins: [
new HtmlWebpackPlugin({ // ------
template: "public/index.html
})
],
devServer: {
contentBase: path.resolve(__dirname, './'),
port: 8088,
inline: true,
hot: true, // 热加载
// hotOnly: true, // 只热加载,不更新页面
open: true // 自动浏览器打开
}
}
第三步
npx webpack-dev-server --mode development
注意:一般webpack-dev-server
生成的文件是在内存中,不会在dist/
文件,这样可以加快加载效率,不是 BUG