Question

我是es6 / react js和webpack的新手，从过去6天开始我尝试使用es6和webpack创建startkit以下是我的webpack.config.js，我成功地能够配置web pack dev服务器。我的应用程序在http：/ localhost：8080 / webpack-dev-server上运行。当我运行npm build来生成bundle.js时。如果我只使用localhost运行我的应用程序：8080我的应用程序运行在chrome但在mozilla中给出错误（r.render不是函数）。 Webpack非常令人困惑......我们可以在file：// server上本地运行文件bundle.js文件。就像在普通的html文件中一样，如果我包含那个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>

Answer 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"
    })
  ]
};

如何使用通过webpack生成的静态js与es6做出反应

1 个答案: