Webpack 服务器配置 + 外部库

Question

我有以下 webpack 配置文件：

const webpack = require('webpack');
const CopyWebpackPlugin = require('copy-webpack-plugin');
const LiveReloadPlugin = require('webpack-livereload-plugin');
const path = require('path');

module.exports = {
  entry: [
    'webpack-dev-server/client?http://0.0.0.0:2000', // WebpackDevServer host and port
    'webpack/hot/only-dev-server', // "only" prevents reload on syntax errors
    './app/index.tsx'
  ],
  output: {
    path: __dirname + '/dist/',
    filename: 'bundle.js'
  },

  devtool: 'source-map',

  resolve: {
    extensions: ['', '.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },

  module: {
    loaders: [
      {
        test: /\.tsx?$/,
        loaders: ['react-hot', 'ts'],
        include: path.join(__dirname, 'app')
      }
    ],

    preLoaders: [
      'source-map-loader'.
      {test: /\.js$/, loader: 'source-map-loader'}
    ]
  },

  plugins: [
    new CopyWebpackPlugin([
      {from: './app/index.html', to: './dist/index.html'}
    ]),
    new webpack.HotModuleReplacementPlugin()
  ],
  builds.
  externals: {
    'react': 'React',
    'react-dom': 'ReactDOM'
  }
};

这是我的服务器配置：

const webpack = require('webpack');
const WebpackDevServer = require('webpack-dev-server');
const config = require('./webpack.config');

new WebpackDevServer(webpack(config), {
  contentBase: './dist',
  publicPath: config.output.publicPath,
  hot: true,
  historyApiFallback: true,
  open: 'http://localhost:2000'
}).listen(2000, 'localhost', function (err, result) {
  if (err) {
    return console.log(err);
  }

  console.log('Listening at http://localhost:2000/');
});

我希望能够从根路径访问应用程序：http://localhost:2000 而不是 http://localhost:2000/dist。

还有一件事，有没有办法使用 webpack 将所有外部依赖项从 node_modules 移动到 dist（无需在 index.html 文件）？

Answer 1

在您的服务器配置上将您的 public path 更改为

publicPath: '/',

Answer 2

首先，对于设置应用程序起点，您需要将 publicPath 设置为 "/" 或 publicPath: 'http://localhost:2000' 你的第二个问题

有什么方法可以将所有外部依赖项从 node_modules 移动到带有 webpack 的 dist 吗？

是

您可以只为外部模块使用不同的文件并捆绑该文件。你不需要处理 index.html 文件让 webpack 插件 HtmlWebpackPlugin 处理它。

第一步为您的应用设置入口点

entry: {
        'vendors': './src/vendors.ts',//your external libraries 
        'app': './src/main.ts' //your app
}

并输出

output: {
    publicPath: '/',
    filename: '[name].js'//this will generate two different files app.js, vendor.js
}

如何添加HtmlWebpackPlugin?

在你的插件中添加这个

new HtmlWebpackPlugin({
     template: "./src/index.html",
     minify:false
})

Webpack 服务器配置 + 外部库

Webpack server configuration + external libs

reactjs

webpack

webpack-dev-server

有什么方法可以将所有外部依赖项从 node_modules 移动到带有 webpack 的 dist 吗？

是

如何添加HtmlWebpackPlugin?

现在它将为您放置脚本标签