回顾搭建webpack环境
1.npm init -y
创建package.json文件(保存安装包的一些信息【版本信息】)
2.npm install webpack webpack-cli webpack-dev-server html-webpack-plugin -D
创建了node_modules和package-lock.json(保存了当前安装包的一些依赖信息)
3.创建文件index.js 入口文件entry里可以配置
4.创建webpack.config.js module.exports={mode:‘development’}
不同的source-map模式
eval(可以锁定代码行数)
在开发环境中,devtool默认是eval
每个module会封装到eval里包裹起来执行,并且会在末尾追加注释//sourceURL
source-map(可以锁定代码行数)
生成一个SourceMap文件 //# SourceMappingURL=main.js.map
hidden-source-map(不可以锁定代码行数)
和source-map一样,但不会在bundle末尾追加注释,会生成一个main.js.map,但不会与main.js做关联
inline-source-map(可以锁定代码行数)
不会单独的把main.js.map打包出来,而是生成一个DataUrl形式的SourceMap文件
eval-source-map(可以锁定代码行数)
不会单独的生成一个文件,每个module会通过eval()来执行,并i企鹅生成一个DataUrl形式的SourceMap
cheap-source-map(可以锁定代码行数)
会生成main.js.map,只保存代码所在的行数,但生成列信息。可以减少main.js.map的文件大小
cheap-module-source-map(可以锁定代码行数,推荐)
生成一个没有列信息(column-mappings)的SourceMaps文件,同时loader的sourcemap也被简化为只包含对应行的。
在生产环境中一般不会开启sourcemap功能,主要原因有:
1、通过bundle和sourcemap文件,可以反编译出源码,也就是说,上线产物有sourcemap文件的话,有暴露源码的风险。
2、sourcemap文件的体积相对比较大,这和我们生产环境追求的更小更轻的bundle矛盾。
devServer
devServer: {
static: './dist',
// gzip
compress: true,
port: 8080,
// 开发服务器主机时,局域网内其他人也可以访问你这个服务,启动服务后会显示域名
host:'0.0.0.0',
// 添加响应头Response Headers
headers:{
'X-Access-Token':'abc123',
},
// 开启代理,跨域
proxy:{
'/api':'http://localhost:9000',
},
// 把我们本地的http服务变成https服务
// 由于默认配置使用的是自签名证书,所以有的浏览器会告诉你是不安全的
// 但我们仍然可以访问这个网站
// https:true,
// http2默认自带https自签名证书,也是用https访问
// 可以搭建一个https的服务器
// http2: true,
// 如果我们的应用是个SPA单页面应用,当路由到/some,会报404的错
// 因为浏览器把这个路由当作了静态资源地址去请求,然而我们没有打包/some这样的资源
// 此时,可以通过配置来通过页面代替任何404的静态资源响应,返回主页信息
// historyApiFallback:true
},
模块热替换和热加载
模块热替换(HMR - hot module replacement)功能会在应用程序运行过程中,替换、添加或删除模块,而无需重新加载整个页面。【可以做到页面的部分刷新】
HotModuleReplacementPlugin
devServer:{
// 默认开启的
hot:ture,
}
以上可以解决css的热替换,其实是css-loader帮忙实现的
实现js的热替换要在js文件中加上以下
if(module.hot){
module.hot.accept('./input.js',()=>{
})
}
热加载(文件更新时,自动刷新我们的服务和页面)新版的webpack-dev-server默认已经开启了热加载的功能
devServer:{
liveReload:true,
}
这两个功能可以大大提高我们的开发效率
eslint
eslint是用来扫描我们所写的代码是否符合规范的工具。往往我们的项目是多人协作开发的,我们期望统一的代码规范,这时候可以让eslint来对我们进行约束。eslint配置与webpack无关,但在工程化开发环境中,它往往是不可或缺的。
安装npm install eslint -D
初始化配置npx eslint --init
npx eslint ./src
- 安装vscode插件 ESlint
- webpack处理 babel-loader eslint-loader
git-hooks和husky
在开发过程中我们一般不希望做代码的检查,而是在git提交之前今天eslint的校验。我们可以使用工具husky,husky是基于git-hooks实现的
git-commit(文件内填入eslint校验 npx eslint ./src)
git status // 查看修改状态
chmod +x ./mygit/git-commit //修改权限 可执行
git add.
git commit -m ‘xxxx’