logo标签列表

Webpack生产构建无法正常工作

reactjswebpackproduction
6

我在开发环境下工作时没有任何问题，热重载和一切正常。但是尝试进行生产构建却非常具有挑战性，只得到一个空白页面。这里似乎有类似的问题，但我没有将任何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>
你是如何提供prod bundle的？包含它的HTML文件是什么样子？ - Interrobang
你确定你的 src 引用是正确的吗？有控制台错误吗？ - Jack
请检查您的网络选项卡，是否加载了 bundle.js 文件？ - topheman
通过调整一些东西，我已经能够获得与react-transform-hmr和生产环境相关的错误。 - chrysillo
1
那个人就是这样做的，只是从 Babel 配置中删除了 'react-hmre'。感谢帮助，干杯！ - chrysillo
显示剩余2条评论
1个回答
0

我一直在使用一种略有不同的解决方案。我的做法是通过webpack捆绑文件，然后使用koa服务器提供静态文件，最后有一个npm启动脚本将NODE_ENV设置为production。看一下：

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

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接