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"
  }
}

你可能感兴趣的:(前端,webpack4)