欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

reactwebpack.js配置教程

程序员文章站 2022-06-20 23:52:28
reactwebpack.js配置教程 const { resolve } = require('path'); const webpack = requi...

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

};