react and webpack配置

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/xing_____/article/details/82855449

源码 链接：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"
  }
}