react初探: webpack.js 配置
阿新 • • 發佈:2018-12-06
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'
// })
],
};