webpack4入门1——概览

本文长期更新，如有错误，还请指正！
关注一下不迷路 =.=

webpack是什么

---

一种自动流程构建工具，简单的说就是帮你零散的代码打包起来，官网图镇楼

image

but，众所周知，webpack配置繁琐难以记忆，入门不易，手脚架遍地。

核心概念

---

配置太多眼花缭乱，主要抓住最基本4个概念

• 入口(entry)
• 出口(output)
• loader
• 插件(plugins)

入口

你要打包哪个文件，webpack会把这个文件的相关依赖也打包进去（比如各种import进来的文件）

出口

打包后的文件叫啥名字，放在哪

loader

webpack本身只打包js，使用loader可以打包其他代码、文件（比如css，图片等）

插件

可以是第三方插件，webpack的强大之处，一些其他任务处理（比如代码压缩，去注释等）

安装（window）

---

因为电脑已安装过webpack2.6，所以实际安装可能有出入，如有错误，欢迎指正

1. 安装好node环境，安装cnpm，打开cmd

2. 安装webpack

• 全局安装 cnpm install -g webpack

• 本地安装，进入项目目录 cnpm install --save-dev webpack

2. 安装webpack-cli

• 全局安装 cnpm install -g webpack-cli

• 本地安装，进入项目目录 cnpm install --save-dev -D webpack-cli

配置文件

配置方式一：开发和生成不分离

webpack所有配置都配置在webpack.config.js文件中。

在项目中创建配置文件，并加入代码：

module.exports={
    //待加入配置项
}

配置方式二：开发和生成分离

1 . 新加三个文件：基础配置文件、开发时配置文件、生产时配置文件

webpack.base.conf.js 基础配置文件

webpack.dev.conf.js 开发时配置文件

webpack.prod.conf.js 生产时配置文件

2 . 配置 开发 & 生产 2个脚本

//package.json
"scripts": {
    "start": "webpack-dev-server --open --config webpack.dev.conf.js",
    "build": "webpack --config webpack.prod.conf.js"
}