前端的工程化和自动化

前端的工程化和自动化

grunt gulp browserify webpack

当今主流 webpack vue react angular

当前市面 2 个版本
webpack 3.0
webpack 4.0

webpack 4

1. webpack 基础认识

官网地址
官网: https://webpack.js.org/
中文: https://www.webpackjs.com/
前身: browserify 缺点，只能转化js

webpack作用?

• 干嘛的: 项目管理、打包、模块管理(依赖问题)、加载资源(js/css/html/png…/woff/data/vue…),转换器(loader)
• 前身：grunt/gulp/browserify->webpack->pratcle

webpack的历史
webpack1支持CMD和AMD，同时拥有丰富的plugin和loader，webpack逐渐得到广泛应用。
webpack2 支持ES Module，分析ESModule之间的依赖关系，webpack1必须将ES，Module转换成CommonJS模块，2支持tree sharking
webpack3 新的特性大都围绕ES Module提出，如Scope Hoisting和Magic Comment；

前端的模块化
AMD : require.js
CMD : sea.js( 弃用了 )
COMMON.js ： node.js

环境支持： Node8以上

1. 安装：

   • 全局

     npm i webpack webpack-cli -g
     cnpm i webpack webpack-cli -g
     yarn add webpack webpack-cli global
     

   cli 命令行工具 打包会依赖cli

   本地（项目目录）
   npm i webpack webpack-cli --save-dev 开发依赖

   项目： 优先找本地 ----》 全局

概念：
webpack是一种静态编译工具(预编译)
我们主要研究： 入口文件、出口、转换器、插件

---

二、webpack–打包

• development： 开发环境

• production； 生产环境

  webpack --mode development 会自动找src/index.js 到 dist/main.js
  要求设置开发模式|生产模式

  webpack 入口地址 --mode development 指定出口

  webpack aa/index.js --mode development bb/index.js 自定义

• 环境分离

  1. development:
     1). 浏览器调试工具
     2). 注释、开发阶段的详细错误日志和提示
     3). 快速和优化的增量构建机制
  2. production:
     1). 开启所有的优化代码
     2). 更小的main大小
     3). 去除掉只在开发阶段运行的代码
     4). Scope hoisting(作用域提升)和Tree-shaking(打包的结构只包含实际用到的 exports)

---

三、webpack----自动解决依赖:

• 原理：Webpack 会分析入口文件，解析包含依赖关系的各个文件。这些文件（模块）都打包到 main.js 。Webpack 会给每个模块分配一个唯一的 id 并通过这个 id 索引和访问模块。在页面启动时，会先执行 main.js 中的代码，其它模块会在运行 require 的时候再执行。

---

四、webpack - loader：

• webpack默认只支持javascript文件(默认)

• 其他文件(CSS/LEASS/…) 需要用加载器(loader)

  loader: 类似一种转化器， 它可以把一个东西，转成另一个

  需要下载 style-loader(读取到的css文件插到页面) css-loader(读取css文件)
  下载: npm install style-loader css-loader -D

  require(‘style-loader!css-loader!./xx.css’)

---

五、配置:

webpack.config.js 是一个nodejs

• 作用: 配置一些webpack需要入口、出口、loader、Chunk代码块、Plugin扩展插件、Module模块
  编写：
  单入口（单页面）：

        module.exports={
            entry:'./src/index.js'    入口文件
            output:{ 默认输出到dist
                path:path.resolve(__dirname,'dist')//指定编译目录  不写默认指定到dist
                filename:'js/boundle.js'//以编译目录为根的出口文件路径
            },
            module: {
                rules:[
                    {test:'/\.css$/',use:['style-loader','css-loader']}
                ]
            },
            mode:'development' | production 区别环境
        }

多入口(多页面)

    entry: 入口接收string | json
        {app:'index1.js',app2:'index2.js'} 输出要求多输出
    output: {
        path:path.resolve(__dirname,'dist') //指定编译目录
        publicPath:'dist', //指定虚拟目录 不写指向编译目录，html引入js时，必填
        filename:'bundle.js' 单文件输出 | '[name].js' 多输出  html引入app和app2 配合
    }

webpack 开发环境下编译(打包到bundle.js)
webpack -p 生产环境下编译(打包到bundle.js,并压缩)
webpack -w 监听文件改动,自动编译,不用每次运行,但不会自动刷新浏览器

---

end