webpack4系列实践笔记

1,586 阅读2分钟

1.webpack 是什么?

webpack 是目前 javascript 主流的工程自动构建工具,目前 Vue,React 以及 Angular 等项目脚手架都是基于 webpack 进行构建的。

webpack 官方中文文档:www.webpackjs.com/concepts/

webpack 官方英文文档:webpack.js.org/concepts

2.webpack 需要安装的环境

webpack 需要安装的环境有:

  • webpack
  • webpack-cli

安装的方式有两种:

  • 项目本地安装( npm install webpack webpack-cli )

    运行方法:

    .\node_modules\.bin\webpack .\index.js
    
  • 全局安装( npm install webpack webpack-cli -g )

    运行方法:

    webpack .\index.js
    

不理解本地安装和全局安装? 撸一遍npm的文档? www.npmjs.cn/

为了避免每个demo都在本地安装一遍 webpack 和 webpack-cli ,这里推荐使用全局安装的方式。

注意:有一些 webpack plugin 是依赖于 webpack 或 webpack-cli 的,比如 mini-css-extract-plugin, html-webpack-plugin 或 webpack-dev-server 等 ,这种情况需要本地安装 webpack: npm install webpack ,但编译环境依然可以使用全局 webpack 命令来进行编译打包(前提是你的本地 webpack 和全局的 webpack 版本兼容)。

3.我的webpack版本

webpack: v4.29.5

webpack-cli: 3.2.3

本 webpack4 系列的实践 demo 都是基于此版本进行的

4.关于安装webpack

3.1 首先安装 nodejs ,安装成功后,会自带 npm 管理器

3.2 安装 webpack

npm install -g webpack webpack-cli

3.2 查看当前 webpack 版本号

webpack -v

5.demo list

demo01: 最简单的 webpack 零配置实践

demo02: 使用 webpack.config.js 配置文件

demo03: webpack 默认支持各种模块化规范

demo04: webpack + babel7

demo05: webpack + typescript

demo06: webpack + babel7 + typescript

demo07: 自动生成 Html 文件

demo08: 关于 SplitChunksPlugin

demo09: 使用 SplitChunksPlugin 分离第三方依赖包以及异步包

demo10: 关于 Tree Shaking

demo11: webpack 处理 css

demo12: webpack 处理 scss

demo13: webpack通过postcss-loader加工css和scss

demo14: mini-css-extract-plugin + SplitChunksPlugin 处理 css 和 scss

demo15: webpack 处理图片

demo16: webpack 处理字体

demo17: demo17 clean-webpack-plugin (清除模式)

demo18: webpack-dev-server (开发模式)

demo19: webpack 开发模式和生产模式

6.源码地址

github.com/SimpleCodeC…

7.关于作者