demo地址: https://github.com/Lkkkkkkg/webpack-demo
全局安装
npm install --global webpack // --global代表全局安装
本地安装
对于大多数项目, 我们建议本地安装, 这可以使我们在引入破坏式变更(breaking change)的依赖时, 更容易分别升级项目
npm install webpack // --global代表全局安装
开始搭建
先创建一个目录 demo01 , 初始化 npm , 再本地安装 webpack 和 webpack-cli (如果使用 webpack 4+ 版本, 你还需要安装 webpack-cli , webpack-cli 是用于在命令行中运行 webpack )
mkdir demo01 //创建一个目录demo01
cd demo01 //进入demo01
npm -init -y //初始化npm, -y代表参数全部默认
npm install webpack webpack-cli --save-dev //这里本地安装webpack和webpack-cli, --save-dev代表保存在package.json文件里
配置 webpack 目录结构
接下来将创建一个如下的文件目录
|- /dist //用于放打包后文件的文件夹
|- bundle.js //出口文件
|- index.html //模板文件
|- /node_modules
|- /src //用于放源文件的文件夹
|- index.js //入口文件
|- package.json
|- webpack.config.js //webpack配置文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack-demo01</title>
</head>
<body>
<script src="bundle.js"></script> //引用出口文件, 因为bundle.js是webpack打包出来的文件
</body>
</html>
index.js
import _ from 'lodash';
function component() {
var element = document.createElement('div');
element.innerHTML = _.join(['Hello', 'webpack'], ' '); //要用到lodash的语法
return element;
}
document.body.appendChild(component());
要在 index.js 中打包 lodash 依赖, 我们需要在本地安装 lodash:
npm install --save lodash
使用 webpack 配置文件
webpack.config.js
const path = require('path'); //node自带的path模块
module.exports = {
entry: './src/index.js', //入口文件配置
output: { //出口文件配置
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
}
};
使用 webpack-cli 在命令行中运行 webpack
使用 webpack 命令打包, 如果是全局安装了webpack, 直接在终端输入webpack, 如果是本地则需要加上前缀目录 ./node_modules/.bin/webpack , 如果是 Node 8.2+ 版本, 可以输入 npx webpack, Node 8.2+ 提供的 npx 命令,可以运行在初始安装的 webpack 包(package)的 webpack 二进制文件(./node_modules/.bin/webpack)
webpack// 全局安装的情况下
./node_modules/.bin/webpack //局部安装的情况下
npx webpack // Node 8.2+
打开index.html
webpack打包成功, 这里index.html引用的是bundle.js, 而js代码写在index.js里, 说明webpack将入口文件的js打包输出到了bundle.js, index.html可以引用到里面的js, 输出了来自index.js的内容
使用NPM脚本代替 webpack-cli 命令
考虑到用 CLI 这种方式来运行本地的 webpack 不是特别方便(也就是在命令行输入npx webpack), 我们可以设置一个快捷方式, 在 package.json 添加一个 npm 脚本(npm script):
package.json
{
"name": "demo05",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //在这一行添加这个字段
},
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^4.27.1",
"webpack-cli": "^3.1.2"
},
"dependencies": {
"lodash": "^4.17.11"
}
}
现在,可以使用 npm run build 命令,来替代我们之前使用的 npx 命令, 意思就是npm帮忙运行webpack, npm会在自动在webpack加上目录前缀, 也就说相当于在命令行输入./node_modules/.bin/webpack
npm run build //相当于./node_modules/.bin/webpack