npm start在浏览器中显示生成的js文件

时间:2019-03-25 05:06:33

标签: reactjs webpack

当我执行npm start时,我正在浏览器中生成js文件。 我在用着 “ webpack”:“ ^ 4.29.6”,     “ webpack-cli”:“ ^ 3.3.0”,     “ webpack-dev-server”:“ ^ 3.2.1”,     “ webpack-manifest-plugin”:“ ^ 2.0.4” 以下是我的webpack.config.js。 请在这里告诉我我在做什么错

当我执行npm start时,我正在浏览器上生成js文件。

我正在使用

"webpack": "^4.29.6"
"webpack-cli": "^3.3.0"
"webpack-dev-server": "^3.2.1"

下面是我的webpack.config.js

请告诉我我在做什么错。

   const cssFilename = 'static/css/style.[hash].css';
    module.exports = {
        entry: './src/index.js',
        externals: [nodeExternals()],
        mode: "production",
        resolve: {
            extensions: ['.js', '.json', '.jsx', '.css', '.svg']
        },
        module: {
            rules: [
                {
                    test: /\.(js|jsx)$/,
                    exclude: /(node_modules|bower_components)/,
                    include: path.resolve(__dirname, 'src'),
                    use: {
                        loader: 'babel-loader',
                        options: {
                            presets: ['@babel/env', '@babel/react']
                        }
                    }
                },
                {
                    test: /\.css?$/,
                    include: path.resolve(__dirname, 'src'),
                    exclude: /(node_modules|bower_components)/,
                    use: ['raw-loader','style-loader','to-string-loader','css-loader']

                }    
            ]
        },
        devtool: 'inline-source-map',

        output: {
            path: path.resolve(__dirname, 'build'),
            filename: 'static/js/bundle.[hash].js',
            chunkFilename: 'static/js/bundle.[hash].js',
            publicPath: './'
        },
        plugins: [
            new webpack.NoEmitOnErrorsPlugin(),
             new HtmlWebpackPlugin({
                filename: './index.html',
                template: './public/index.html'
            })
        ]

    };

Package.json

{
  "name": "demo",
  "version": "1.0.0",
  "description": "demo",
  "private": true,
  "jest": {
    "collectCoverageFrom": [
      "src/Actions/"
    ],
    "coverageThreshold": {
      "global": {
        "branches": 10,
        "functions": 10,
        "lines": 10,
        "statements": 10
      }
    }
  },
  "scripts": {
    "watch": "webpack --watch",
    "start": "webpack-dev-server",
    "build": "webpack",
    "test": "set CI=true &&jest --coverage"
  },
  "homepage": ".",
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "@babel/cli": "^7.2.3",
    "@babel/core": "^7.2.3",
    "@babel/plugin-proposal-class-properties": "^7.3.0",
    "@babel/plugin-syntax-dynamic-import": "^7.2.0",
    "@babel/preset-env": "^7.2.3",
    "@babel/preset-flow": "^7.0.0",
    "@babel/preset-react": "^7.0.0",
    "babel-eslint": "9.0.0",
    "babel-loader": "^8.0.5",
    "babel-register": "^6.26.0",
    "extract-text-webpack-plugin": "^4.0.0-beta.0",
    "html-loader": "^0.5.5",
    "html-webpack-plugin": "^3.2.0",
    "jest": "^24.5.0",
    "jest-environment-enzyme": "^7.0.1",
    "jest-enzyme": "^7.0.1",
    "mini-css-extract-plugin": "^0.5.0",
    "raw-loader": "^0.5.1",
    "react-svg-loader": "^2.1.0",
    "source-map-loader": "^0.2.4",
    "to-string-loader": "^1.1.5",
    "ts-jest": "^23.10.1",
    "typescript": "^3.0.3",
    "webpack": "^4.29.6",
    "webpack-cli": "^3.3.0",
    "webpack-dev-server": "^3.2.1",
    "webpack-manifest-plugin": "^2.0.4"
  },
  "exclude": [
    "node_modules"
  ],
  "dependencies": {
    "axios": "^0.18.0",
    "axios-mock-adapter": "^1.16.0",
    "babel-preset-react-app": "^7.0.2",
    "css-loader": "^2.1.1",
    "file-loader": "^3.0.1",
    "file-saver": "^1.3.8",
    "lodash": "^4.17.10",
    "postcss-flexbugs-fixes": "^4.1.0",
    "postcss-loader": "^3.0.0",
    "react": "^16.7.0",
    "react-dom": "^16.7.0",
    "react-redux": "^5.1.1",
    "redux": "^4.0.0",
    "redux-thunk": "^2.3.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "webpack-node-externals": "^1.7.2"
  }
}

0 个答案:

没有答案