Question

我有不同的网络模块，如下所示：

文件结构

├───Bundles
│   ├───Bundle1
│   │   └───src
│   │       │   index.html
│   │       │   EntryPoint.js
│   │       │
│   │       └───assets
│   │           ├───css
│   │           │       animate.css
│   │           ├───fonts
│   │           │       Bitter-Bold.otf
│   │           │       Bitter-BoldItalic.otf
│   │           │
│   │           ├───img
│   │           │   │   button-pink.png
│   │           │   │
│   │           │   ├───popup
│   │           │   │       close.png
│   │           │   │
│   │           │   ├───slideshow
│   │           │   │       1.jpg
│   │           │   │       2.jpg
│   │           │   │
│   │           │   └───aaa
│   │           │           1.jpeg
│   │           │
│   │           ├───js
│   │           │       bubble-click.js
│   │           │       bubble.js
│   │           │
│   │           └───video
│   ├───Bundle2
│   │   └───src
│   │       │   index.html
│   │       │   EntryPoint.js
│   │       │
│   │       └───assets
│   │           ├───css
│   │           │       aaa.css
│   │           │
│   │           ├───fonts
│   │           │       Bitter-Bold.otf
│   │           │       Bitter-BoldItalic.otf
│   │           │
│   │           ├───img
│   │           │   ├───a
│   │           │   │       c.png
│   │           │   │
│   │           │   ├───instruction
│   │           │   │       swipe-to-change.gif
│   │           │   │
│   │           │   └───popup
│   │           │           close.png
│   │           │
│   │           ├───js
│   │           │       b.js

Bundle1和Bundle2彼此独立，我试图将它们编译为bundle1.js和bundle2.js，最后将它们一起包含在AllBundles.html中，并且我使用webpack来确保css类名称没有冲突，javascript独立工作等，每个bundle都会使用自己的entrypoint.js公开一个activate和deactivate方法：

Entrypoint.js

var mainPage = require('./index.html');

module.exports = {
    activate: function() {
    return "B1 activated";
  },
    deactivate: function() {
    return "B1 deactivated";
  },
}

webpack config：

...
module: {
    preLoaders: [{
      test: /\.jsx$|\.js$/,
      loader: 'eslint-loader',
      include: __dirname + '/src/'
    }],
    loaders: [{
      test: /\.jsx?$/,
      include: path.join(__dirname, 'src'),
      loader: "babel-loader",
      exclude: [nodeModulesPath]
    }, {
      test: /\.scss$/,
      include: path.join(__dirname, 'src'),
      loader: ExtractTextPlugin.extract('style-loader', 'css!autoprefixer-loader?browsers=last 2 version!sass')
    },{ test: /\.css$/, loader: ExtractTextPlugin.extract('style-loader', 'css-loader') },
      { test: /\.jpe?g$|\.gif$|\.png$/i, loader: "file-loader" },
      { test: /\.html$/, loader: 'html-loader' }
    ]
  }
...

预期行为

我期待生成的html将css类转换为哈希码，更改css文件名，转换javascripts

实际行为

当我运行webpack命令时，只有img src链接转换为hashcodes，链接和脚本标记保持不变。

<link rel="stylesheet" type="text/css" href="assets/css/page-animation.css" />
<link rel="stylesheet" type="text/css" href="assets/css/animate.css" />
<script type="text/javascript" src="assets/js/jquery-3.0.0.min.js"></script>
<script type="text/javascript" src="assets/js/modernizr.custom.js"></script>

but images:

<img class="img-responsive" src="/public/747289b7348be5e879a1c821cae8bffa.png" />

出了什么问题？

传统的html js css捆绑包上的webpack？

0 个答案: