版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/qq_27603235/article/details/79319018
const { resolve } = require('path');
const webpack = require('webpack');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
// 檔案起始點從 entry 進入,因為是陣列所以也可以是多個檔案
entry: [
'react-hot-loader/patch',
// 开启react代码的模块热替换(HMR)
'webpack-dev-server/client?http://localhost:8080',
// 为webpack-dev-server的环境打包好运行代码
// 然后连接到指定服务器域名与端口
'webpack/hot/only-dev-server',
// 为热替换(HMR)打包好运行代码
// only- 意味着只有成功更新运行代码才会执行热替换(HMR)
'./index.js'
// 我们app的入口文件
],
// output 是放入產生出來的結果的相關參數
output: {
path: resolve(__dirname, 'dist'),
filename: 'bundle.js',
publicPath: '/'
// 对于热替换(HMR)是必须的,让webpack知道在哪里载入热更新的模块(chunk)
},
context: resolve(__dirname, 'src'),
module: {
rules: [
{
test: /\.js$/,
use: {
loader:'babel-loader',
},
exclude: /node_modules/
},
{
test: /\.css$/,
use: [
'style-loader',
'css-loader',
],
},
],
},
devtool: 'inline-source-map',
// devServer 則是 webpack-dev-server 設定
devServer: {
hot: true,
// 开启服务器的模块热替换(HMR)
contentBase: resolve(__dirname, 'dist'),
// 输出文件的路径
publicPath: '/'
// 和上文output的"publicPath"值保持一致
},
// plugins 放置所使用的外掛
plugins: [
new webpack.HotModuleReplacementPlugin(),
// 开启全局的模块热替换(HMR)
new webpack.NamedModulesPlugin(),
// 当模块热替换(HMR)时在浏览器控制台输出对用户更友好的模块名字信息
// new CleanWebpackPlugin(['dist']),
// new HtmlWebpackPlugin({
// title: 'Development'
// })
],
};