124 lines
2.3 KiB
Markdown
124 lines
2.3 KiB
Markdown
### 使用yarn 安装 webpack
|
||
1. yarn的使用：
|
||
yarn add 安装
|
||
|
||
yarn global add 全局安装
|
||
|
||
yarn add 软件包名+@版本号 指定版本安装
|
||
|
||
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
|