Question

我正在尝试使用webpack运行我的react.js应用程序。该项目中包含以下文件：index.html，index.js，styles.css，package.json，.txt，webpack.config.js 和一个包含图像的文件夹。该项目在没有webpack的情况下运行良好，但是当我使用webpack时，在命令“ npm run dev”之后，我得到了一个空的浏览器页面（localhost：8080），我的项目没有显示。我多次更改了webpack.config.js文件，但结果是相同的。这是我最大的配置文件版本：

 var path = require('path');
 var webpack = require('webpack');
 var UglifyJSPlugin = require('uglifyjs-webpack-plugin');
 var HtmlWebpackPlugin = require('html-webpack-plugin');
 var MiniCssExtractPlugin = require("mini-css-extract-plugin");

 module.exports = {
    entry: './index.js',      
    output: {     
        path: path.resolve(__dirname, './public'),
        publicPath: '/public/',
        filename: 'bundle.js'     
        },
    resolve: {
      modules: ['node_modules']
     },
    module:{
    rules:[   
              {
                test: /\.jsx?$/, 
                exclude: /node_modules/, 

                loader: 'babel-loader',  
                options : {                    
                presets:["@babel/preset-env", "@babel/preset-react"]   
                      }
              },  {
          test: /\.html$/,
          loader: 'html-loader'
        }, {
        test: /\.(png|jpe?g|gif)$/,
        loader: 'file-loader?name=assets/[name].[hash].[ext]'
           }, {
                test: /\.css$/,          
                 use: [
          MiniCssExtractPlugin.loader,
          "css-loader"
             ]
         } 

        ]

   },    
          plugins: [

         new HtmlWebpackPlugin({
             template: 'CanvasReactGit/index.html'
            }),
         new MiniCssExtractPlugin({
                filename: "bundle.css"
        }),
         new UglifyJSPlugin(),
         new webpack.NoEmitOnErrorsPlugin(),
         new webpack.LoaderOptionsPlugin({
             htmlLoader: {
               minimize: false
             }
          })

        ]   
  }

这是package.json文件：

 {
     "name": "reactwebpackproject",
     "description": "A react.js project with webpack",
     "version": "1.0.0",
     "author": "Irina",
     "scripts": {
     "dev": "webpack-dev-server --hot --open",
     "build": "webpack"
 },
    "dependencies": {
    "react": "^16.5.0",
    "react-dom": "^16.5.0"
 },
   "devDependencies": {
       "@babel/core": "^7.1.2",
       "babel-loader": "^8.0.0",
       "@babel/preset-env": "^7.1.0",
       "@babel/preset-react": "^7.0.0",
       "webpack": "^4.21.0",
       "webpack-cli": "^3.1.2",
       "webpack-dev-server": "^3.1.9",
       "html-loader": "^0.5.1",
       "html-webpack-plugin": "^3.2.0",
       "css-loader": "^1.0.0",
       "file-loader": "^2.0.0",
       "mini-css-extract-plugin": "^0.4.4"
     }
 }

这是控制台输出：

命令“ npm run build”显示带有错误的模态窗口，并指出已假定对象。此Webpack问题的原因是什么？

Webpack：命令“ npm run dev”打开没有项目的浏览器页面

0 个答案: