Webpack系列笔记（一）：初识webpack

1.1 Webpack究竟是什么？

是一个基于 NodeJS 的模块打包工具

常见的模块引入规范有： ES module、CommonJS、CMD、AMD，一般来说浏览器端使用 ES，Node使用 CommonJS

点击查看ES module、CommonJS、CMD、AMD的区别

//  ES module 模块引入方式
import Header from './header.js'
// ES module 导出模块方式
export default Header


// CommonJS 模块引入规范
const Header = require('./header.js')
// CommonJS 导出模块方式
module.exports = Header

最开始，webpack仅仅是 js 的模块打包工具，但是随着webpack的发展，它已经能打包诸如 css，图片 之类的各种文件

1.2 Webpack 的安装

最好在项目内安装 webpack， 不要装全局 webpack。因为如果有多个项目都是通过 webpack 打包，而这几个项目的 webpack 版本不一样，如果你想同时运行这些项目，那么就会出现问题。

注意：项目名（package.json 文件中的 name 属性）一定不要是 “webpack”，安装时会报错

安装webpack-cli 的作用是使得 我们能在命令行中使用 webpack 命令

# 全局安装 --- 不建议
npm i webpack webpack-cli -g

# 在项目内安装
npm i webpack webpack-cli --save-dev

安装在项目内时，不能直接通过 webpack 命令来打包项目，但是 npm 提供了 npx 命令，该命令可以在node_modules 文件夹下找到 webpack

# 在项目中安装webpack，查看webpack版本
npx webpack -v

# 在项目中安装webpack，打包 index.js
npx webpack index.js

1.3 Webpack 的配置

webpack 的默认配置文件是 webpack.config.js，想要做配置的话，在工程文件夹下新建一个叫 webpack.config.js 文件，若执行 webpack 打包命令时，没有指定入口文件，webpack 就会找到默认的 webpack.config.js 配置文件，打包里面的 entry 所指定的文件，然后将打包后的文件放到 output 所指定的文件夹下。

# 没有配置文件，需指定入口文件，打包后的文件默认放在项目根目录下 /dist/main.js 中
npx webpack index.js

# 有配置文件，就不用指定入口文件，直接运行命令
npx webpack

如果不想使用 webpack 默认配置文件的文件名，只需运行以下命令即可使用自定义的配置文件：

# 使用自定义文件名的 webpack 配置文件
npx webpack --config 修改后的文件名.js

简单的 webpack 配置文件

const path = require('path')

module.exports = {
  mode: 'development', // 打包模式，默认是 production
  entry: {
    main: './index.js', // 打包的入口文件，即打包 index.js 文件
  },
  output: {
    filename: 'bundle.js', // 打包后的文件名
    path: path.resolve(__dirname, 'bundle'), // 打包后的文件放在哪个文件夹内，这里必须是绝对路径
  }
}

在 Vue、React 脚手架创建的项目中没有使用 npx 命令是因为在 package.json 文件中的 scripts 配置了命令，例如在 vue-cli 创建的项目中运行 npm run dev时，就会运行 node build/dev-server.js 命令

[email protected] 创建的项目中 package.json 的 scripts 配置：

"scripts": {
  "dev": "node build/dev-server.js",
  "start": "node build/dev-server.js",
  "build": "node build/build.js",
  "lint": "eslint --ext .js,.vue src"
}

我们可以在 package.json 做以下配置，就可以直接运行 npm run bundle 命令，该命令会直接运行 webpack 命令打包，而之所以不用写成 "bundle": "npx webpack"，是因为 npm scripts 会优先在 node_modules 文件夹下找，所以就不用加上 npx

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "scripts": {
    "bundle": "webpack"
  },
  "keywords": [],
  "author": "diaoxg",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.38.0",
    "webpack-cli": "^3.3.6"
  }
}