标签：

使用yarn 安装 webpack

yarn的使用：
yarn add 安装

yarn global add 全局安装

yarn add 软件包名[email protected]版本号 指定版本安装

yarn remove +xxx 移除

yarn init 初始化

yarn upgrade +xxx 升级

所以，，yarn 安装webpack 需要运行：yarn global add webpack

2.webpack使用：
用yarn 安装好后 终端运行 webpack 会报错（webpack命令找不到）

注，使用npm install webpack -g 也就是使用npm全局安装webpack时不会报错。 是因为，安装node 时，会自动把npm的环境变量加入系统变量中

window系统 运行 yarn global bin 查看yarn 的全局目录 然后从我的电脑加入 环境变量

linux 系统 运行 yarn global bin 查看 yarn 的全局目录，然后 #export PATH=$path:+路径

这样webpack就可以 全局运行了

webpack使用

不包含webpackcli 单独使用webpack

1.webpack 目录：

/webpackeg /dist bundle.js //打包后生成的js文件 index.html //package.json中定义的入口文件 /node_moudels //yarn 安装的 各种插件 /src index.js 要压缩的js文件 package.json 应用的默认配置 webpack.config.js

2.package.json 内容

{ "name": "ceshi", "version": "1.0.0", "description": "wu", "main": "index.js", == "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack --mode production", "dev": "webpack --mode development" },== "author": "aaa", "license": "3000", "private": false }

webpack.config.js 内容：

const path = require('path'); module.exports = { // 入口js路径 entry: './src/index.js', // 编译输出的js及路径 output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') } };

3.运行项目
在当前目录打开终端，输入 yarn run build

webpack热更新

1.安装 webpack-dev-server

yarn global add webpack-dev-server

2.在最外层目录新建 webpack.dev.js

输入配置信息：

const path=require("path") moudle.export={ entry:"" //入口文件路径 output:{ path:"" 压缩后文件所在路径, filename:"" 文件名 } }

3.更改 package.json

script ->dev 改成
"dev": "webpack-dev-server --config webpack.dev.js --open"

4.终端运行 yarn run dev

webpack 第一弹（基本操作）