Question

使用webpack我将源文件与分发文件分开。

我遇到的一个问题与output.publicPath有关，如果我定义一个，生成的index.html有错误的CSS和JS资源路径。我认为问题与extract-text-webpack-plugin相关：请参阅：https://github.com/webpack-contrib/extract-text-webpack-plugin/issues/246

现在，我已将代码分为源代码和分发版index.html，http://localhost/target/classes/war可用<base />。并且每个页面刷新都需要手动输入URL，因为路由无法识别文件夹名称。头部中的./target/classes/war标签似乎没有效果。

如何指示webpack在http://localhost/显示文件夹output.publicPath的内容？（不使用webpack.config.js）

为了完整性，请在下面找到整个var path = require('path'); var webpack = require('webpack'); var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require('extract-text-webpack-plugin'); var GoogleFontsPlugin = require("google-fonts-webpack-plugin"); module.exports = { entry: { polyfills: './src/main/webapp/polyfills.ts', vendor: './src/main/webapp/vendor.ts', app: './src/main/webapp/app/core/global/main/main.ts' }, output: { filename: 'target/classes/war/script/[name].[hash].bundle.js' }, resolve: { extensions: ['.ts', '.js'], alias: { css: path.resolve(__dirname, "src/main/webapp/WEB-INF/scss"), src: path.resolve(__dirname, "src/main/webapp"), dist: path.resolve(__dirname, "target/class/war") } }, module: { rules: [ { test: /\.ts$/, loaders: [ { loader: 'awesome-typescript-loader', options: { configFileName: path.resolve(__dirname, "src/main/webapp/WEB-INF/conf/tsconfig.json") } }, 'angular2-template-loader' ] }, { test: /\.html$/, loader: 'html-loader' }, { test: /\.(png|jpe?g|gif|svg|woff|woff2|ttf|eot|ico)$/, loaders: [ { loader: "file-loader", options: { hash: "sha512", digest: "hex", name: "/target/classes/war/assets/[name].[hash].[ext]" } } ] }, { test: /\.(css|scss)$/, exclude: path.resolve(__dirname, "src/main/webapp/scss"), include: path.resolve(__dirname, "src/main/webapp/app"), loaders: [ { loader: "raw-loader" }, { loader: "sass-loader" } ] }, { test: /\.(css|scss)$/, exclude: path.resolve(__dirname, "src/main/webapp/app"), use: [ { loader: "style-loader" // creates style nodes from JS strings }, { loader: "css-loader" // translates CSS into CommonJS }, { loader: "resolve-url-loader" // compiles Sass to CSS }, { loader: "sass-loader" // compiles Sass to CSS } ] } ] }, plugins: [ // Workaround for angular/angular#11580 new webpack.ContextReplacementPlugin( // The (\\|\/) piece accounts for path separators in *nix and Windows /angular(\\|\/)core(\\|\/)@angular/, path.resolve(__dirname, "src/main/webapp"), // location of your src {} // a map of your routes ), new webpack.optimize.CommonsChunkPlugin({ name: ['app', 'vendor', 'polyfills'] }), new HtmlWebpackPlugin({ template: 'src/main/webapp/index.html', filename: 'target/classes/war/index.html', chunksSortMode: function (chunk1, chunk2) { var order = ['polyfills', 'vendor', 'app']; var order1 = order.indexOf(chunk1.names[0]); var order2 = order.indexOf(chunk2.names[0]); return order1 - order2; } }), new ExtractTextPlugin({ filename: "target/classes/war/css/styles.[contenthash].css" }), new GoogleFontsPlugin({ fonts: [ {family: "Lato"} ], path: "src/main/webapp/scss/fonts/", filename: "src/main/webapp/scss/fonts/fonts.css" }) ] };：

cur.execute('SELECT count FROM Counts WHERE email = ? ', (email, ))
row = cur.fetchone()
if row is None:
    cur.execute('''INSERT INTO Counts (email, count) VALUES ( ?, 1 )''', 
    ( email, ) )
else : 
    cur.execute('UPDATE Counts SET count=count+1 WHERE email = ?', 
    (email, ))

Answer 1

此webpack配置的结果是。

<script type="text/javascript" src="http://localhost/target/classes/war/script/app.5e643bae101bd4743814.bundle.js"></script>

配置

var path = require('path');
var webpack = require('webpack');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');

module.exports = {
 entry: {
  // it's .js now for testing
  app: './src/main/webapp/app/core/global/main/main.js'
 },    
 output: {
  filename: 'target/classes/war/script/[name].[hash].bundle.js',
  publicPath: 'http://localhost/'
 },
 module: {
  rules: [
   {
    test: /\.(css|scss)$/,
    loaders: [
     {
      loader: "raw-loader"
     },
     {
      loader: "sass-loader"
     }
    ]
   },
  ]
 },
 plugins: [

  new HtmlWebpackPlugin({
   // it's .ejs now
   template: 'src/main/webapp/index.template.ejs',
   filename: 'target/classes/war/index.html',
  }),

  new ExtractTextPlugin({
   filename: "target/classes/war/css/styles.[contenthash].css"
  }),    
 ]
};

Answer 2

如果我的问题正确，您希望使用unable to connect作为应用程序构建工件的目标路径。

您可能使用了错误的target/classes/war属性：而不是output，只需使用output.path。

output.publicPath

如果您需要将构建与CDN集成，

output: { filename: 'script/[name].[hash].bundle.js', path: path.resolve(__dirname, 'target/classes/war'), },通常是正确的选项。

请注意，您还应删除output.publicPath的{{1}}设置。

Answer 3

我找到了提供所需功能的CLI参数--content-base。我不确定如何从webpack.config.js配置它，但以下CLI正是我正在寻找的：

webpack-dev-server --inline --open --progress --port 80 --content-base /target/classes/war

该网站现在可在http // localhost /上获得，并从正确的目录提供。

Webpack dev服务器：定义WWW根目录

3 个答案: