深入浅出Webpack

素颜马尾好姑娘i 2023-03-01 13:48 20阅读 0赞

http://webpack.wuhaolin.cn/

# 模块化规范 #

1.  CommonJS  
    require 同步加载依赖  
    module.exports
    
    Node.js  
    需通过工具转为ES5
    
     *  1:export.XX=XX
     *  2:module.export=XX
2.  AMD
    
    Asynchronous\_module\_definition  
    异步加载模块
3.  ES6模块化
    
    import XX ,\{XX\} from “”;
    
    export default \{\};
    
    export ()=>\{\}
4.  样式文件
    
    @import “XX”

# 框架 #

简化DOM操作

1.  React  
    render
2.  Vue
    
        <template>
        </template>
        
        
        <script>
          export default{
            data(){
              return {
                
              }
            }
          }
        </script>
        
        
        <style>
        </style>
3.  Angular2

# New #

1.  ES6  
    bable
2.  ts
3.  Flow
4.  Scss

# 构建工具 #

将源码转化为可执行的 js,html,css

压缩

代码分割，首屏不需要的异步加载

模块合并

发布

## npm script ##

shell脚本

## Grunt ##

## Gulp ##

基于strom流的自动化构建工具

管理，执行文件，监听，读写文件

.task 注册一个任务

.run 执行任务

.watch 监听文件变化

.src 读文件

.dest 写文件

## rollup ##

# 进入webpack的世界 #

## 安装 ##

通过webpack可执行文件启动构建任务

### 新建web项目 ###

1.  npm init
2.  Yeoman 快速生成

### 安装Webpack ###

npm i -D webpack

@beta 体验版

发表评论取消回复

表情：

评论列表（有 0 条评论，20人围观）

还没有评论，来说两句吧...

相关阅读

相关 webpack深入浅出实战系列

> 很多人都或多或少使用过 webpack，但是很少有人能够系统的学习 webpack 配置，遇到错误的时候就会一脸懵，不知道从哪查起？性能优化时也不知道能做什么，网上的优化教

朱雀/ 2023年07月03日 06:08/ 0 赞/ 140 阅读

相关深入浅出Webpack

http://webpack.wuhaolin.cn/ 模块化规范 1. CommonJS require 同步加载依赖 module.exp

素颜马尾好姑娘i/ 2023年03月01日 13:48/ 0 赞/ 21 阅读

相关 WEBPACK_webpack初体验

基础使用 1.安装插件需要安装webpack和webpack-cli npm i -s webpack webpack-cli 2.生成package.js

小咪咪/ 2023年02月22日 10:46/ 0 赞/ 26 阅读

相关【Webpack】Webpack基础入门

目录 1. 模块化相关概念 1.1 模块化的概念 1.2 模块化规范

红太狼/ 2023年02月17日 11:13/ 0 赞/ 306 阅读

相关 webpack 深入浅出分析之打包公共代码、代码分割和懒加载

一、webpack 打包公共代码 1. 创建一个空文件夹，通过 `npm init` 初始化创建 `package.json` 文件，通过 `npm install w

小咪咪/ 2023年02月11日 12:28/ 0 赞/ 24 阅读

相关 webpack 深入浅出分析之打包 JS、ES6 和 Typescript

一、webpack 打包 JS 文件 1. 通过 `npm install webpack` 命令可以下载 `webpack`，通过 `npm install webp

水深无声/ 2023年02月11日 11:30/ 0 赞/ 19 阅读

相关深入浅出FE（十六）深入浅出YAML

YAML 并不是一种新奇的语言，YAML 首次发表于 2001 年，距离现在已经过去差不多 20 个年头。YAML 虽然不如 JSON、XML 之类的语言流行，应用也没有那么广

雨点打透心脏的1/2处/ 2022年12月31日 03:24/ 0 赞/ 188 阅读

相关深入浅出FE（十四）深入浅出websocket

一、理论知识 1.1 引言 Websocket是一个持久化的协议协议分为ws（80端口）协议和wss（443端口）协议。 WebSocket是一种在单个TCP

Love The Way You Lie/ 2022年12月19日 08:52/ 0 赞/ 167 阅读

相关 js文件引用 webpack_[js高手之路]深入浅出webpack教程系列1-安装与基本打包用法和命令参数...

\[js高手之路\]深入浅出webpack教程系列索引目录： webpack，我想大家应该都知道或者听过，Webpack是前端一个工具,可以让各个模块进行加载,预处理,再进行

梦里梦外;/ 2022年11月07日 15:58/ 0 赞/ 12 阅读

相关深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

[mock的官网文档][mock] [mock官网][mock 1] 关于mockjs的优点，官网这样描述它： 1）可以前后端分离。 2）增加单元测试的真实性(通过

待我称王封你为后i/ 2021年09月29日 19:14/ 0 赞/ 284 阅读