react初探： webpack.js 配置

版权声明：本文为博主原创文章，未经博主允许不得转载。 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'
        // })
    ],

};