Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/443.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 传统html js css包上的网页包?_Javascript_Html_Css_Webpack - Fatal编程技术网

Javascript 传统html js css包上的网页包?

Javascript 传统html js css包上的网页包?,javascript,html,css,webpack,Javascript,Html,Css,Webpack,我有不同的web模块,如下所示: 文件结构 ├───Bundles │ ├───Bundle1 │ │ └───src │ │ │ index.html │ │ │ EntryPoint.js │ │ │ │ │ └───assets │ │ ├───css │ │ │ animate.css │ │ ├───fonts │

我有不同的web模块,如下所示:

文件结构

├───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";
  },
}
网页包配置:

...
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命令时,只有imgsrc链接被转换为hashcode,链接和脚本标记保持不变

<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" />

但是图像:
出了什么问题