webpack基础
1.webpack安装
1.全局安装webpack命令
npm i webpack webpack-cli -g
2.项目中安装webpack
npm i webpack webpack-cli -D
注意:需要在node.js环境中使用
2.webpack-cli
npm在5.2版本中提供一个npx命令
npx要解决的主要问题是调用项目内部安装的模块,原理就是在node_modules
下边的.bin
目录中找到相对应的命令执行
使用webpack命令: npx webpack
3.webpack配置
3.1 webpack四大核心概念:
1.入口(entry): 程序的入口js;
2.输出(output): 打包后存放的位置;
3.loader: 用于对模块的源代码进行转换;
4.插件(plugins): 插件目的在于解决loader无法实现的其他情况;
3.2 配置和运行
1.配置webpack.config.js
;
2.运行npx webpack
;
const path = require('path')
module.exports = {
// 入口文件配置
entry: './src/index.js',
// 出口文件配置
output: {
// 输出的路径,webpack2起就规定必须是绝对路径
path: path.join(__dirname, 'dist'),
// 输出文件名字
filename: 'bundle.js'
},
mode: 'development' // 默认为production, 可以手动设置为development, 区别就是是否进行压缩混淆
}
将npx webpack命令配置到package.json脚本中
1.配置packages.json
;
2.运行npm run build
;
{
"name": "webpack-basic",
"version": "1.0.0",
"main": "index.js",
"license": "MIT",
"scripts": {
"build": "webpack"
},
"devDependencies": {
"webpack": "^4.30.0",
"webpack-cli": "^3.3.1"
}
}
4.开发时自动编译工具
每次要编译代码时,手动运行npm run build
会很麻烦
webpack中有几个不同的选项,可以帮助你在代码发生变化后自动编译代码:
- webpack’s Watch Mode
- webpack-dev-server
- webpack-dev-middleware
**注意:**开发时一般使用 webpack-dev-server
4.1 webpack-dev-server (最常用)
4.1.1 通过cli的方式设置devServer参数
- 安装
devServer
:
devServer
需要依赖webpack
,必须在项目依赖中安装webpack
npm i webpack-dev-server webpack -D
-
index.html中修改
-
运行:
npx webpack-dev-server
-
热加载,编译后自动打开,配置端口号,
- 运行
npx webpack-dev-server --hot --open --port 8899
- 运行
-
在packages.json的scripts:
- “dev”:
webpack-dev-server --hot --open --port 8899
- “dev”:
-
运行npm run dev
devServer会在内存中生成一个打包好的bundle.js, 专供开发时使用,打包效率高,修改代码后会自动重新打包以及刷新浏览器
4.1.2 通过配置文件对devServer参数修改
1.修改webpack.config.js
const path = require('path')
module.exports = {
// 入口文件配置
entry: './src/index.js',
// 出口文件配置
output: {
// 输出的路径,从webpack2开始就规定必须是绝对路径
path:path.join(__dirname,'dist'),
// 输出文件名字
filename: 'bundle.js'
},
devServer: {
port: 8899,
open: true,
hot: true
},
mode: 'development'
}
2.修改package.json 的scripts: “dev”: “webpack-dev-webpack”
3.运行npm run dev
4.2 watch
在webpack
指令后面加上 --watch
参数
作用: 监视本地项目文件变化,发现有修改代码会自动编译打包,生成输出文件;
通过cli方式设置watch参数:
1.配置packages.json
中的script
"watch": "webpack --watch"
2.运行npm run watch
通过配置文件对watch参数进行修改:
const path = require('path')
// webpack的配置文件遵循着CommonJS规范
module.exports = {
entry: './src/main.js',
output: {
// path.resolve() : 解析当前相对路径的绝对路径
// path: path.resolve('./dist/'),
// path: path.resolve(__dirname, './dist/'),
path: path.join(__dirname, './dist/'),
filename: 'bundle.js'
},
mode: 'development',
// 把watch值为true
watch: true
}
注意: 使用npm run build
命令运行