码迷,mamicode.com
首页 > Web开发 > 详细

webpack 4 技术点记录

时间:2020-03-14 00:56:15      阅读:61      评论:0      收藏:0      [点我收藏+]

标签:依赖   打包工具   生产   做什么   es5   合并文件   发布   node   规范   

---【webpack是什么,能做什么?】:

---是一个模块打包机,可以将浏览器不能直接运行的语言,将其打包为合适的格式以供浏览器的使用

---》实现代码的转换:比如把es6转为es5,把less转为css

---》文件的优化:压缩代码,合并文件

---》模块的合并:多个模块合成一个模块

---》代码校验:检测代码的规范

---》自动发布:把打包好的发送到服务器上

---【webpack安装】:本地安装

-  先初始化-npm i -y                          npm i webpack webpack-cli -D        安装开发依赖上线时不需要

---webpack可以进行零配置, 打包工具=》输出后的结果=》js模块

---【webpack的基本配置】:

---=》手动配置webpack:         (webpack 是node写出来的)

  =>配置默认的文件名 webpack.config.js

    let path = requier("path")   //node 的内置模块

    module.exports = {

      mode:"development"          //指定模式  production 生产模式    development 开发模式-压缩后的

      entry:"./src/index.js",         //指定打包的入口文件

      output:{                           //出口

        filename:"bundle.js"               //出口文件,设置出口文件的名字

        path:path.resolve(__dirname,"dist")      //指定打包好的文件放在哪里的文件夹,__dirname表示以当前目录产生一个dist文件夹

      }

               }

   

 

webpack 4 技术点记录

标签:依赖   打包工具   生产   做什么   es5   合并文件   发布   node   规范   

原文地址:https://www.cnblogs.com/zzhqdkf/p/12490144.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!