Question

我的webpack配置如下

config.output = isTest ? {} : {
path: __dirname + '/dist',
publicPath: baseUrl,
filename: isProd ? '[name].[hash].js' : '[name].bundle.js',
chunkFilename: isProd ? '[name].[hash].js' : '[name].bundle.js'
};

 if (!isTest) {

config.plugins.unshift(
  new HtmlWebpackPlugin({
    template: './app/index.ejs',
    inject: 'body',
    baseUrl: '/'
  }),
  new ExtractTextPlugin('[name].[hash].css', {disable: !isProd})
);

config.plugins.push(
    new webpack.optimize.CommonsChunkPlugin('vendors', 'vendors.js')
  );  
}

但是当我运行webpack时，它会在dist文件夹中创建index.html文件，其中包含vendor.js和/app.bundle.js，其中所有三个都在同一个文件夹中，

<script type="text/javascript" src="/vendors.js"></script><script type="text/javascript" src="/app.bundle.js"></script></body>

因此，当我运行

webpack-dev-server --history-api-fallback --inline --progress --host 0.0.0.0

它不能正确呈现页面并抛出错误，因为它无法找到jquery模块，如下所示：

Uncaught ReferenceError: jQuery is not defined(anonymous function) @ transition.js:59__webpack_require__ @ bootstrap 26cc2c2…:50(anonymous function) @ no-op.js?59ab:1__webpack_require__ @ bootstrap 26cc2c2…:50(anonymous function) @ no-op.js:2__webpack_require__ @ bootstrap 26cc2c2…:50(anonymous function) @ loader.js:1__webpack_require__ @ bootstrap 26cc2c2…:50(anonymous function) @ bootstrap 26cc2c2…:96__webpack_require__ @ bootstrap 26cc2c2…:50(anonymous function) @ bootstrap 26cc2c2…:96(anonymous function) @ bootstrap 26cc2c2…:96 angular.js:68

Answer 1

好的，我已经成功解决了这个问题，只是webpack中的一个baseURL，

我知道当index.html由vendorpack和vendor.js以及app.bundle.js创建时，它会将baseURL附加到index.html内的脚本路径

var baseUrl = '/abc/' 
inside index.html, it will be <script type="text/javascript" src="/abc/vendors.js"></script><script type="text/javascript" src="/abc/app.bundle.js"></script></body> </html>

由webpack创建的index.html包括vendor.js和带有“/”的app.bundle.js，它们位于相同的dist文件夹中

1 个答案: