webpack打包疑惑点

1.如何解决多文件入口问题：

 entry:{
  main:'./src/script/main.js',
  a:'./src/script/a.js',
  b:'./src/script/b.js',
  c:'./src/script/c.js'
 },
output:{
   path:'F:\\与前端有关的\\New Folder\\webpack-demo\\dist',
   filename:'js/[name].[chunkhash].bundle.js',
   publicPath:'http://cdn.com/'
},

2.npm run webpack与webpack命令有什么区别?

webpack是webpack自带的一条打包命令，是最基本的打包命令。
npm run webpack，则是在package.json文件中有一个script配置项，在这个script里面自定义的一条命令，它通过npm来运行。
当脚本名为“start”时，可以省略“run”，直接为：npm start
当脚本名称为“webpack”时，如上例所示：

 scripts": {
      "webpack": "webpack --config webpack.config.js --progress --watch"
 }

后面可以加一些参数来方便开发，执行下面这条语句

npm run webpack

就相当于执行脚本里的那一长串命令了

3.webpack中对于输出文件名可以有三种hash值：hash，chunkhash，contenthash这三者有什么区别呢？

hash
hash是工程级别的，即每次修改任何一个文件，所有文件名的hash至都将改变。所以一旦修改了任何一个文件，整个项目的文件缓存都将失效。每个压缩后的文件的hash值是一样的，所以对于没有改变的模块而言，这样做显然不恰当，因为缓存失效了。
在这里插入图片描述
chunkhash
chunkhash根据不同的入口文件(Entry)进行依赖文件解析、构建对应的chunk，生成对应的哈希值。在生产环境里把一些公共库和程序入口文件区分开，单独打包构建，接着我们采用chunkhash的方式生成哈希值，那么只要我们不改动公共库的代码，就可以保证其哈希值不会受影响。并且webpack4中支持了异步import功能，固，chunkhash也作用于此，如下：
在这里插入图片描述
我们将各个模块的hash值 (除主干文件) 改为chunkhash，然后重新build一下，可得下图：

在这里插入图片描述
contenthash
contenthash是针对文件内容级别的，当模块的内容变了，hash值才改变。

4. key充当数组成员时的内容

<% for (var key in htmlWebpackPlugin.files){ %>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>
有key时：

 publicPath : "http://cdn.com/"      

 Chunks:
 {"main":  
   { "size":22,
     "entry":"http://cdn.com/js/main.4b2d5681d06121a61a2b.bundle.js",
     "hash":"4b2d5681d06121a61a2b",
     "css":[]
   },
   "a"：
   { "size":14,
     "entry":"http://cdn.com/js/a.573e9d0bead185521386.bundle.js","
     hash":"573e9d0bead185521386",
     "css":[]
     }
  }             
 js :
    ["http://cdn.com/js/main.4b2d5681d06121a61a2b.bundle.js",
       "http://cdn.com/js/a.573e9d0bead185521386.bundle.js"]             
  css : []              
  manifest :

无key时，每个属性的内容都包含整个对象的内容。

5. 小知识点

i) . 自动化生成的html页面的插件属性的遍历

模板index.html文件中

遍历htmlWebpackPlugin.
<% for(var key in htmlWebpackPlugin){ %>
<%= key %>
<% } %>
遍历htmlWebpackPlugin.files
<% for (var key in htmlWebpackPlugin.files){ %>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.files[key]) %>
<% } %>
遍历htmlWebpackPlugin.options
<% for (var key in htmlWebpackPlugin.options){ %>
<%= key %> : <%= JSON.stringify(htmlWebpackPlugin.options[key]) %>
<% } %>

ii).自动化生成的html页面的压缩
minify:{
removeComments:true,
collapseWhitespace:true
},
iii).变成线上地址

 webpack.config.js
       publicPath:'http://cdn.com/'  
  .html
     <head>     
    <script  type="text/javascript">			
     <%= compilation.assets[htmlWebpackPlugin.files.chunks.main.entry.substr(htmlWebpackPlugin.files.publicPath.length)].source() %>		
     </script>
     </head>
     <body>    
     <% for(var k in htmlWebpackPlugin){ %>		
             <% if(k!=='main'){ %>		
           <script src="<%= htmlWebpackPlugin.files.chunks[k].entry %>" type="text/javascript" charset="utf-8"></script>		
             <% } %>		
     <% } %>
     </body>

iv).webpack打包时.html文件的打包方法

当.js文件需要用到.html中的结构时，需要在.js文件中引入.html文件，方法如下

import layer from './History.html';
function App(){	
  var dom=document.getElementsByTagName('body')[0];	
  dom.innerHTML=layer;
}
App();

5.问题点

问题一:

Invalid configuration object. 
Webpack has been initialised using a configuration object that does not match the API  schema.

修改：
webpack.config.js
1: path: 请使用绝对路径
2:loaders改为rules

问题二：配置打包时

 TypeError:Cannot read property 'bindings' of null 或 
 Error:Cannot find module '@babel/core'

解决：模块中对js的处理配置如下图可解决

在这里插入图片描述

问题三：

 npm WARN [email protected] requires a peer of less@^2.3.1 || ^3.0.0 but none is installed. Y...

解决方法：
npm install less -D