一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第2天，点击查看活动详情。 webpack是目前前端较受欢迎的打包工具，今天刚学习了一点基础，记录一下

webpack是前端工程化非常必要的一部分，今天学习了webpack-bable，webpack-dev，webpack-watch三个模块，简单和大家说说

webpack-babel

webpack-babel是一个将es5以上的js转换成es5的模块，目前还是有一些浏览器不支持es6语法，所以打包文件还是很有必要配置一下的

安装

npm i @babel/core @babel/cli

当然仅仅安装这两个是不行的，必选安装对应的plugin

安装解析箭头函数的模块

npm i @babel/plugin-transform-arrow-functions

安装解析es6 const、let的模块

npm i @babel/plugin-transform-block-scoping

当然这样安装就显得我们很傻，一个个安装也很费时间，所以推出了预设preset，安装这个就可以直接使用，而不需要再去单独配置安装plugin

npm i @babel/preset-env

使用预设就很方便

使用

先介绍一下不使用预设的使用方式

{
    test:/\.js$/,
    use:{
        loader:"babel-loader",
        options:{
            plugins:[
                "@babel/plugin-transform-arrow-functions",
                "@babel/plugin-transform-block-scoping"
            ]
        }
    }
}

使用这种方式必须要有@bable/core这个包，和使用的的plugin

上述代码大家应该都可以看懂的，options是选项，对babel-loader的一个设置，plugins是bable-loader的一个插件的数组，配置完成后，webpack就会对js文件es6的部分进行处理打包成es5

我们也可以用预设进行打包

{
    test:/\.js$/,
    use:{
        loader:"babel-loader",
        presets:[
            "@babel/preset-env"
        ]
    }
}

presets是对babel-loader的一个预设，传入我们刚才下载的包@babel/preset-env便可以使用啦

这样是不是就很方便了

当然当我们使用的loader很多的时候，就显得我们webpack.config.js文件混乱，那么是不是有方法可已解决这个问题呢？

答案是有的，我们在文件下新建bable.config.js文件，导出配置便可以了

module.exports = {
    presets:[
        "@babel/preset-env"
    ]
}

在webpack.config.js里面直接使用就可以了，不需要再导入，bable加载的时候会自动找到配置文件，读取配置

{
    test:/\.js$/,
    loader:"babel-loader"   //语法糖
}

这样设置就显得我们没那么混乱

webpack-watch

webpack-watch主要用来对文件进行观察，一旦文件发生改变，就会重新打包文件，并且刷新浏览器，当然，浏览器的刷新不是因为他，而是因为重新打包了文件，浏览器需要重新解析，自动打包
不需要安装，webpack内置

使用

直接webpack --watch就可以使用也可以在package.json里面配置

  "scripts": {
    "build": "webpack --watch",
  },

还可以在webpack.config.js里面配置

module.exports={
    watch:true
}

当然一般开发都不用watch，一般都会用webpack-dev-server

webpack-dev-server

webpack-dev-server可以让你在开始过程中开启一个服务器，当代码更新时，只更新模块数据发生变化的模块，其他模块不更新，从而节省打包时间，提高开发效率

安装

安装此模块必须要有webpack-cli才可以使用

npm i webpack-dev-server

使用

一般都会配置package.json，然后直接使用创建服务器

"scripts": {
"build": "webpack",
"serve": "webpack serve"   //使用webpack-dev-server
},

不过在使用之前记得配置

这就需要介绍一下devserver的几个配置

contentBase配置

contentBase:"./public",

设置了这个配置，所对应的文件会被复制到内存中
这个配置的主要作用是当加载到webpack没有打包的文件时会来找这个配置所对应的文件夹，比如vue脚手架中的favicon.ico文件就不会被打包

目前的"webpack5.37.1已经放弃了这种写法，现在是

contentBase:"./public",

devServer:{
    webpack 没打包的东西会来这里找，最新版本已经禁用，改成static
    contentBase:"./public",
},

hot配置

hot：模块热替换HMR 热加载，程序运行过程中，替换，删除而不重新刷新整个页面，提高我们的开发效率 hot:true 但是还要配置target:web才可以

---webpack.config.js中配置
module.exports={
    target:web
}

配置非常简单，但是作用可不简单，它可以让我们修改代码后直接在浏览器中呈现

最后devServe的配置如下

devServer:{
    webpack 没打包的东西会来这里找，最新版本已经禁用，改成static
    contentBase:"./public",
    hot:true
},

今天才学习4个多小时，一天比一天懒，不过也就是隔离在家才有时间学习这么长时间，我还是希望自己能坚持隔离在家每天8小时的学习，明天一定坚持，疫情快点过去，我好找工作，大家一起加油！！！！

webpack-babel，webpack-dev，webpack-watch简单使用

webpack-babel

安装

使用

webpack-watch

使用

webpack-dev-server

安装

使用

contentBase配置

hot配置