个人中心
gpt4 book ai didi

reactjs - webpack 生产构建无法正常工作

转载 作者：行者123 更新时间：2023-12-03 13:39:07 25 4
gpt4 key购买 nike

我在开发环境上工作没有任何问题，热重载并且一切正常。事实证明，尝试制作一个作品非常具有挑战性，除了一张空白页之外什么也没有。这里似乎有类似的问题，但我没有使用任何 html 作为入口点。提前致谢。

package.json

{
  "name": "dc",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "dev": "webpack-dev-server -d --content-base public --inline --hot --host 0.0.0.0",
    "prod": "webpack -p --progress --config prod.config.js"
      },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "axios": "^0.9.1",
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-polyfill": "^6.7.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "babel-preset-react-hmre": "^1.1.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.8.5",
    "history": "^2.0.1",
    "isomorphic-fetch": "^2.2.1",
    "node-sass": "^3.4.2",
    "react": "^0.14.7",
    "react-css-transition-replace": "^1.1.0",
    "react-dom": "^0.14.7",
    "react-hot-loader": "^1.3.0",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "redux": "^3.3.1",
    "redux-logger": "^2.6.1",
    "redux-thunk": "^2.0.1",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.1",
    "webpack": "^1.12.14"
  },
  "dependencies": {
    "axios": "^0.9.1",     
    "history": "^2.0.1",
    "isomorphic-fetch": "^2.2.1",    
    "react": "^0.14.7",
    "react-redux": "^4.4.1",
    "react-router": "^2.0.1",
    "redux": "^3.3.1"
  }
}

生产配置

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
  entry : ["./app/App.js"],
  output : {
    filename: "bundle.js",
    publicPath: 'dist/',
    path : path.resolve(__dirname, 'dist/')
  },
  devtool: 'source-map',
  devServer: {
    contentBase: 'dist/'
  },
  plugins: [
      new webpack.DefinePlugin({
        'process.env': {
          NODE_ENV: '"production"',
        },
        __DEVELOPMENT__: false,
      }),
      new webpack.optimize.OccurenceOrderPlugin(),
      new ExtractTextPlugin("styles.css"),
      new webpack.NoErrorsPlugin(),
      new webpack.optimize.DedupePlugin(),
      new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: true,
      },
    }),
    ],
  module : {
    loaders : [
      { test : /\.jsx?$/, loader : 'babel-loader',  
        query : { 
          presets : ['react', 'es2015', 'react-hmre']
        }
      },
            { test: /\.(jpg|png)$/, exclude: /node_modules/, loader: "file?name=images/[name].[ext]"},
            { test: /\.css$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") },
            { test: /\.scss$/, exclude: /node_modules/, loader: ExtractTextPlugin.extract("style-loader", "css-loader!sass-loader") }
    ]
  }

};

index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>lol</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div id="app"></div>
    <script src="bundle.js"></script>
</body>
</html>

最佳答案

我一直在使用有点不同的解决方案。我一直在做的是通过 webpack 捆绑文件，然后使用 koa 服务器来提供静态文件，然后使用 npm 启动脚本将 NODE_ENV 设置为生产环境。看看:

package.json:

{

  "name": "react",
  "version": "1.0.0",
  "description": "some description",
  "main": "index.js",
  "scripts": {
    "test": "test",
    "start": "NODE_ENV=production webpack --progress && NODE_ENV=production node server.js",
    "dev": "webpack-dev-server --progress --colors --watch",
    "build": "webpack --progress --watch"
  },
  "author": "your_name",
  "license": "ISC",
  "dependencies":{
    "babel-core": "^6.7.2",
    "babel-loader": "^6.2.4",
    "babel-preset-es2015": "^6.6.0",
    "babel-preset-react": "^6.5.0",
    "copy-webpack-plugin": "^1.1.1",
    "css-loader": "^0.23.1",
    "extract-text-webpack-plugin": "^1.0.1",
    "image-webpack-loader": "^1.6.3",
    "json-loader": "^0.5.4",
    "sass-loader": "^3.2.0",
    "style-loader": "^0.13.0",
    "koa": "2.0.0-alpha.3",
    "koa-convert": "1.2.0",
    "koa-static": "2.0.0",
    "react": "^0.14.7",
    "react-dom": "^0.14.7",
    "webpack": "^1.12.14",
    "webpack-dev-server": "^1.14.1"
  }
}

server.js:

'use strict';


const port = process.env.PORT || 3000;
const Koa = require('koa');
const serve = require('koa-static');
const convert = require('koa-convert');
const app = new Koa();
const _use = app.use;
app.use = (x) => _use.call(app, convert(x));
app.use(serve('./build'));

const server = app.listen(port, function () {
 let host = server.address().address;
 let port = server.address().port;
 console.log('listening at http://%s:%s', host, port);
});

最后webpack.config.js:

var path = require('path');
var webpack = require('webpack');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var CopyWebpackPlugin = require('copy-webpack-plugin');

module.exports = {
  entry: './main.js',
  output: { path: __dirname + "/build/", filename: 'bundle.js' },
  module: {
    loaders: [
      {
        test: /.js?$/,
        loader: 'babel-loader',
        exclude: /node_modules/,
        query: {
          presets: ['es2015', 'react']
        }
      },
      {
       test: /\.scss$/,
       loader: ExtractTextPlugin.extract("style", "css!sass?")
     },
      {
        test: /\.json$/,
        loader: "json"
      },
     {
        test: /\.(jpe?g|png|gif|svg)$/i,
        loaders: [
            'file?hash=sha512&digest=hex&name=[hash].[ext]',
            'image-webpack?bypassOnDebug&optimizationLevel=7&interlaced=false'
        ]
      }
    ]
  },
  plugins: [
     new ExtractTextPlugin("main.css"),
     new CopyWebpackPlugin([
     {
       from: __dirname + '/index.html',
       to: __dirname + '/index.html'
     },
   ])
  ]
};

如果您将使用一个 index.html 文件和一个 main.js 文件来运行它们，并对其做出一些 react ，它将在生产环境中运行:) 我最近写了一篇关于我的解决方案到底是什么样子的文章。欢迎查看:https://medium.com/@TheBannik/get-ready-to-deploy-a-react-js-app-8f62c8e08282#.9gcd329h6

关于reactjs - webpack 生产构建无法正常工作，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/36559090/

25 4 0
文章推荐： reactjs - 未捕获的类型错误 : Cannot read property 'bind' of undefined
文章推荐： .net - 使用 .NET 核心 2.2 中的 MailKit SMTP 客户端使用 Gmail SMTP 发送邮件对我不起作用
文章推荐： facebook - 无法为新创建的相册设置隐私
文章推荐： c# - 如何解决无法建立连接，因为目标机器主动拒绝它 127.0.0.1 :64527
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com