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 less-loader@4.1.0 requires a peer of less@^2.3.1 || ^3.0.0 but none is installed. Y...
解决方法:
npm install less -D