Webpack 构建项目（四）

第四部分开始涉及到多页面的配置以及webpack plugin 中具体的参数。
1、首先涉及到多页面，我们在新建三个JS文件后可以进行如下设置。
（1）在entry 中增加JS文件的路径
（2）针对不同的页面可以new出多个 webpack plugin 对象
（3）对每个页面设置不同的文件名或者Title
（4）针对每一个页面引入不同的JS，通过使用'chunks[ ] '
（5）excludeChunks:['',''] ，表示排除数组内的JS，其他的JS都引用

const path = require('path');
var htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
index
  entry:{
    main:'./src/script/main.js',
    a:'./src/script/a.js',  //（1）新建的JS 
    b:'./src/script/b.js',  //（1）新建的JS
    c:'./src/script/c.js'   //（1）新建的JS

  },
  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'js/[name].js',
    publicPath:'https://cdn.com/'
  },
  plugins:[
    new htmlWebpackPlugin({
      filename:'a.html',
      template:'index.html',
      inject:'body',
      title:'This is a',
      //chunks:['main','a']
      excludeChunks:['b','c']
    }),
    new htmlWebpackPlugin({
      filename:'b.html',
      template:'index.html',
      inject:'body',
      title:'This is b',
      chunks:['b']
    }),
    new htmlWebpackPlugin({
      filename:'c.html',
      template:'index.html',
      inject:'body',
      title:'This is c',
      chunks:['c']
    })
  ]
}

2、引用，通过webpack流处理过的文件目的是：【把页面src引入文件的方式，改成用script标签嵌入的方式，减少http请求( 提高加载性能）】.通过模板文件的写法，在其中编写如下代码，将会得到通过Webpack流处理的JS文件,或者参考如下链接的文章，
使用html-webpack-inline-source-plugin
html-webpack-inline-source-plugin GitHub 地址

  
    
    
    
  
  
    
Hello World
    
Hello YYY