如何使用通过 webpack 生成的静态 js 与 es6 反应应用程序答案

【问题标题】：How to use static js generated throught webpack for react app with es6如何使用通过 webpack 生成的静态 js 与 es6 反应应用程序
【发布时间】：2017-06-03 04:46:02
【问题描述】：

我是 es6/react js 和 webpack 的新手，从过去 6 天开始，我正在尝试使用 es6 为 react 应用程序创建 startkit，下面的 webpack 是我的 webpack.config.js，我能够成功配置 webpack 开发服务器.我的应用程序在 http://localhost:8080/webpack-dev-server 上运行。当我运行 npm build 来生成 bundle.js 时。如果我只使用 localhost:8080 运行我的应用程序，我的应用程序在 chrome 中运行，但在 mozilla 中出现错误（r.render 不起作用）。 Webpack 非常混乱...我们可以在 file:// 服务器上本地运行文件 bundle.js 文件吗？意味着如果我包含该 bundle.js 文件，它应该可以正常工作吗？

我的 webpack.config.js

var path = require('path');
var webpack = require('webpack');
//var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
var mainPath = path.join(__dirname, 'app', 'index.js');
var buildPath = path.join(__dirname, 'dist/assets/');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var autoprefixer = require('autoprefixer')
var sassLoaders = [
  'css-loader?sourceMap',
  'postcss-loader',
  'sass-loader?sourceMap&includePaths[]=' + path.join(__dirname, './app')
]

module.exports = {
    // Makes sure errors in console map to the correct file
    // and line number
    devtool: 'cheap-module-source-map',
    entry: {
      'vendor': ['react','react-dom'],
      "bundle":mainPath
    },
    module: {
      loaders: [
        {
          test: [/\.js$/],
          loader: 'babel-loader',
          exclude: /node_modules/,
          query: {
            presets: ['es2015', 'react']
          }
        },
        // //{ test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
        // { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // use ! to chain loaders
        // { test: /\.s?css$/, loaders: ['style', 'css', 'sass','css?sourceMap', 'sass?sourceMap'] }
        { test: /\.scss$/,
          loader: ExtractTextPlugin.extract('style-loader', sassLoaders.join('!'))
        },
        { test: /\.(ttf|otf|eot|svg|woff(2)?)(\?[a-z0-9]+)?$/, loader: 'file-loader?name=/fonts/[name].[ext]' }
      ]
    },
    output: {
      // We need to give Webpack a path. It does not actually need it,
      // because files are kept in memory in webpack-dev-server, but an
      // error will occur if nothing is specified. We use the buildPath
      // as that points to where the files will eventually be bundled
      // in production
      path: buildPath,
      filename: '[name].js',
      publicPath: 'http://localhost:8080/assets'
    },
    plugins: [
      // Pro-tip: Order matters here.
      new ExtractTextPlugin('[name].css'), new webpack.optimize.CommonsChunkPlugin(['bundle', 'vendor'], '[name].js')
    ],
    postcss: [
      autoprefixer({
        browsers: ['last 2 versions'],
      //path: "./dist",
      filename: '[name].js',
      // Everything related to Webpack should go through a build path,
      // localhost:8080/build. That makes proxying easier to handle
      publicPath: '/dist/'
      })
    ],
    resolve: {
      extensions: ['', '.js', '.jsx','.sass','.woff','.ttf','.eot','.svg'],
      root: [path.join(__dirname, './app')]
    },
    watch:true
};

我的 index.html

<!DOCTYPE html>
<html>
<head>
    <title>React Home Page</title>
    <link rel="stylesheet" href="assets/bundle.css" />
</head>
<body>
<div id="react-app"></div>
<script type="text/javascript" src="assets/vendor.js"></script>
<script type="text/javascript" src="assets/bundle.js"></script>
</body>
</html>

【问题讨论】：

标签： reactjs webpack ecmascript-6

【解决方案1】：

您不必自己链接它，webpack 会为您完成。

HtmlWebpackPlugin 将确保捆绑包被链接到您配置的文件中。

var path = require("path");
var HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  entry: "./app/index.js",
  output: {
    path: path.resolve(__dirname, "dist"),
    filename: "index_bundle.js"
  },
  module: {
    rules: [
      { test: /\.(js)$/, use: "babel-loader" },
      { test: /\.css$/, use: ["style-loader", "css-loader"] }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({
      template: "app/index.html"
    })
  ]
};

【讨论】：