定义
webpack是一个模块打包工具
模块引入方式
ES Module
export default Header;
import Header from './header.js';
CommonJS
module.exports = Header;
var Header = require('./header.js')
CMD AMD 等
文件类型
最开始只是js，现在支持大多数文件类型 样式、图片等
搭建
安装前提
// 检查版本及是否安装
node -v
npm -v
步骤
一、创建package.json
npm init
// 或者如下方式，以默认配置，不会询问
npm init -y
配置
// 私有项目，不会发送到npm的线上仓库
"private": true,
// 简化执行方式，命令行
"scripts": {
// 使用：npm run bundle ，执行这句话相当于执行 webpack
"bundle": "webpack"
},
二、安装webpack
webpack-cli安装后可以使用命令行执行webpack的相关命令
方式一：全局安装
npm install webpack webpack-cli -g
// 查看版本号
webpack -v
不推荐这种方式，因为webpack版本已经固定了，当你安装了4的版本，就无法启动3的版本的项目，除非卸载然后再安装3版本的webpack
// 卸载
npm uninstall webpack webpack-cli -g
方式二：项目安装
命令行进入到项目中
npm install webpack webpack-cli --save-dev
// 或者
npm install webpack webpack-cli -D
webpack -v会在全局查找webpack，所以当在项目中安装webpack时，这个命令是没有作用的。npx是在node_modules中寻找webpack
// 项目内安装查看版本
npx webpack -v
安装指定版本webpack
// 查看版本号
npm info webpack
// 安装指定版本
npm install webpack@4.16.5 webpack-cli -D
配置文件
文件名为webpack.config.js
const path = require('path');
module.exports = {
// 模式：可选为：development, 默认为：production
mode: 'development',
// 源代码文件夹：src
entry: './src/index.js', // 入口文件
output: {
filename: 'bundle.js', // 文件名
path: path.resolve(__dirname, 'dist') // 文件夹
}
}
// 上述代码是入口文件的简写形式
entry: {
main: './src/index.js'
},
修改默认配置文件
npx webpack --config webpackconfig.js
使用方式
// 方式一
./node_modules/.bin/webpack --version
// 方式二
npx webpack --version
// 方式三 配置
npm run
