webpack笔记

1...打包后的文件中包含一个eval函数

2...打包过程
-----1找入口文件.
-----2根据全局引入找到对应的关联关系打包成chunk
-----3,输出成bundle

3...webpack配置文件----webpack.config.js
-----作用...指示webpack做什么事
-----当运行webpack指令时会加载里面的配置
-----构建工具用的时node采用的时commonjs
4....webpack案例
{
1----entry:"入口文件路径",
2----output:{
filename:"build.js",
打包输出路径
path:resolve(__dirname,"build")
},
3-----module:{
rules:[
详细的loader配置
{ 这里用正则表达式 test:/.css......./, use[ 所使用的loader "style-loader", "css-loader"]}

]
},
4-----plugins:[
插件配置

]
5-----mode:'dev/pro'模式配置

}

5-----webpack执行顺序 这里要在eslint配置项中加入enforce:"pre"
先做eslint 语法检查再做bable

6-----html压缩再
htmlwebpackplugin中配置minify:{collapsewhitespace:true,removecomments:true}

7----webpack优化配置
------开发环境优化{1优化打包构建速度2优化代码调试
------生产环境优化{1优化打包构建速度2优化代码运行的性能
------开发环境
1HRM热模块替换----作用一个模块发生变化只会打包这一个模块而不是打包所有模块,提升构建速度
css实现只需要将webpack中的devserver中添加hot:true属性
js不能使用HRM功能
html不能使用HRM功能.开启HRM时还会导致html不能热更新,此时可以将html文件路径写入enrty
html文件一般再spa应用中只有 一个修改时必然会使引起变化因此不用HRM
js模块使用修改js代码添加支持HRM功能的代码
if(module.hot){//如果module上有hot属性则开启了HRM功能让HRM功能生效
module.hot.acctpt("./wenjian.js",function(){
//这里会监听wenjian.js文件的变化,一旦发生变化其他默认不会重新打包构建,会执行这里的函数
})
}

8.--------sourcemap:提供源代码到构建后代码的映射技术 ( 如果构建后代码出错了,通过映射可以追踪到源代码的错误)
使用方式在配置问价里面加上devtool:'source-map'此时打包后在输出的js中会出现built.js.map样式的文件就记录着源代码和构建后的代码的映射关系
可以添加的参数[inline-|hidden-|eval-][nosources--][cheap-[moudule-]]source-map
eg:devtool:"inline-source-map"
inline-source-map:内联形式------map不会单独生成文件,和打包后的文件在同一个文件中
hidden-source-map: 外部生成-----会隐藏源代码位置,可以提示构建后代码的位置

eval-提示源代码位置和错误信息 ,每个文件都生成对应的sourcemap

nodource-可以找到错误信息 但看不到源代码任何信息

cheap-可以找到错误信息, 源代码错误位置只能精确到行

cheapmodule -可以找到错误代码信息和源代码错误位置
开发环境:速度快,调试更友好
速度 eval>inline>cheap>
eval-cheap-souce-map:这样最快,因为用了hash并且只精确到了行
调试更友好:sourcemap
cheap-module-souce-map
cheap-source-map
生产环境:源代码要不要隐藏? 调试?
一般map在外部 因为内联的形式会使编译后的文件体积变大
一般情况下开发环境下用eval-source-map生产环境下用source-map

oneOf :{ 生产环境下打包速度提升
使用方式在module中的rules数组中对象的属性oneOf:[这里写loader]
作用是一旦匹配到之后就不会再匹配其他的loader
oneOf中的loader不能对同一个文件做不同的处理
如果需要时需要将其中一个提取到oneOf之后
}

 

缓存:在bable配置项的option中加上cachedirectory:true
hash:用法:在文件的输出路径上加上hash
每次webpack构建工具在进行构建时都会生成一个唯一的hash
问题:如果重新打包会导致所有缓存失效
chunkhash:会根据不同的chunk产生不同的hash
contenthash:会根据不同的内容来生成不同的hash

tree shaking:去除无用代码
1..必须使用es6的模块化语法,2..开启production环境:mode:production
2..在package.json中配置sideEffects:false:让所有代码没有副作用
3.可能会把css/babel/polyfill副作用文件干掉---------解决 加上一个sidEffects:["*.css"]这样就不会对这些文件进行shaking