Webpack4之构建打包基本项目

为什么要使用webpack？

1. 模块化，把复杂文件细分成小文件
2. 将ES6、ES7等文件格式转换成浏览器可以解析的格式，less、sess文件预处理

webpack是什么？

webpack：打包模块化Javascript的工具

核心：一切文件皆模块

转换文件 - 注入钩子 - 输出模块组成的文件（Loader转换文件 - Plugin注入钩子 - 输出）

使用 webpack 构建基本项目

1. 初始化项目：会生成 package.json 和 package-lock.json两个文件

npm init // 初始化项目，按需求输入项目的基本信息

2. 安装webpack

npm init // 初始化项目，按需求输入项目的基本信息

3. 尝试打包

4. 使用module ：匹配第三方模块（处理次序：由下到上，由右到左）

5. 使用 html-webpack-plugin 打包html文件

默认创建一个空的HTML，自动引入打包输出的所有资源（JS/CSS）

6. 处理图片文件

7. 处理其他文件

8. 使用DevServer实现自动编译

• 安装

npm i webpack-dev-server -D // 下载 webpack-dev-server 的包

• webpack.config.js文件：

module.exports = {
    ...
    devServer: {
    contentBase: resolve(__dirname, 'dist'),
    port: 3000,
    open: true
  }
} 

• 命令行

webpack // 打包
npx webpack-dev-server // 仅在内存中编译打包，不会有任何输出