reactwebpack.js配置教程

reactwebpack.js配置教程

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?https://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'
        // })
    ],

};