react and webpack配置

最新推荐文章于 2024-08-25 23:10:32 发布

xing2233

最新推荐文章于 2024-08-25 23:10:32 发布

阅读量358

点赞数

CC 4.0 BY-SA版权

分类专栏： react

本文链接：https://blog.youkuaiyun.com/xing_____/article/details/82855449

react 专栏收录该内容

4 篇文章

订阅专栏

本文档详细介绍了如何配置React项目与Webpack，包括Webpack的基本配置、React应用的打包设置以及相关依赖的安装步骤。通过提供的源码链接，读者可以下载示例代码进行实践操作。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

源码链接：https://pan.baidu.com/s/1BruNhJhP_Zbw9BPahSXqRw 密码：8mjs

webpack.config.js

const path = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './main.js',
    output: {
        filename: 'build.js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        //打包html
        new HtmlWebpackPlugin({
            title: 'Output Management',
            template: './source.html'
        }),
    ],
    //引第三方插件
    externals: {
        jquery: 'jQuery',
        react: 'React',
        reactDom: 'ReactDOM'
    },
    //调试工具
    devtool: 'inline-source-map',
    module: {
        rules: [{
        //兼容jsx语法
            test: /\.js?$/,
            use: {
                loader: 'babel-loader',
                options: {
                    presets: ['@babel/react']
                }
            }
        }]
    }
};

package.json

{
  "private": true,
  "scripts": {
    "build": "webpack"
  },
  "dependencies": {
    "@babel/core": "^7.1.0",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.2",
    "bootstrap": "^3.3.7",
    "bootstrap-datetime-picker": "^2.4.4",
    "jquery": "^3.3.1",
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
  },
  "devDependencies": {
    "html-webpack-plugin": "^3.2.0",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.1"
  }
}