webpack学习笔记（十）source-map、devServer

回顾搭建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
        
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29

模块热替换和热加载

模块热替换（HMR - hot module replacement）功能会在应用程序运行过程中，替换、添加或删除模块，而无需重新加载整个页面。【可以做到页面的部分刷新】
HotModuleReplacementPlugin

devServer：{
	// 默认开启的
	hot:ture,
}
1
2
3
4

以上可以解决css的热替换,其实是css-loader帮忙实现的
实现js的热替换要在js文件中加上以下

if(module.hot){
	module.hot.accept('./input.js',()=>{
	})
}
1
2
3
4

热加载（文件更新时，自动刷新我们的服务和页面）新版的webpack-dev-server默认已经开启了热加载的功能

devServer：{
	liveReload:true,
}
1
2
3

这两个功能可以大大提高我们的开发效率

eslint

eslint是用来扫描我们所写的代码是否符合规范的工具。往往我们的项目是多人协作开发的，我们期望统一的代码规范，这时候可以让eslint来对我们进行约束。eslint配置与webpack无关，但在工程化开发环境中，它往往是不可或缺的。
安装npm install eslint -D 初始化配置npx eslint --init

1. npx eslint ./src
2. 安装vscode插件 ESlint
3. 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’