1.1 Webpack究竟是什么?
是一个基于 NodeJS 的模块打包工具
常见的模块引入规范有: ES module、CommonJS、CMD、AMD,一般来说浏览器端使用 ES,Node使用 CommonJS
// 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
命令
vue-cli@2.X 创建的项目中 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"
}
}