Webpack 构建项目（二）

1、关于打包文件的命名：

output:{
    path:path.resolve(__dirname,'dist'),
    filename:'js/[name]-[hash].js'
  }
output 中的filename 

(1) [name]
(2)[hash] 本次打包生成的哈希值
(3)[chunkname] 打包时每一个文件的哈希值
2、html 中对打包后的js文件的引用
按照以下配置，在每次打包后，都会使HTML引用最新的打包好的js文件

plugins:[
    new htmlWebpackPlugin()
  ]

3、template
在上一点中，每次打包后实际上会新生成一个HTML文件，对打包后的js的引用实际上是基于新的HTML文件而不是我们自己写的HTML文件，所以基于以上配置，可以扩展配置。
（1）template参数 ，以当前根目录下的index，HTML为模板生成新的HTML
新的HTML既包含我们自己写的内容，也包含打包好的js引用
（2）inject:将script引用放到head标签中。

plugins:[
    new htmlWebpackPlugin({
      filename:'index-[hash].html',
      template:'index.html',
      inject:'head'
    })
  ]

4、输出打包文件 存放指定文件夹
效果是将输出的JS文件放到dist /js路径下 ，生成的html则在dist目录下

  output:{
    path:path.resolve(__dirname,'dist'),
    filename:'js/[name]-[hash].js'  //  name 前加个'js/' 指定其路径 
  }

今天就学习了这么多。进度比较慢。