什么是?
wabpack是当前最流行的打包工具
webpack能做什么?
将 sass/less 等预编译css语言 转化为 浏览器能够认识的css文件
将多个文件打包生成为一个文件
搭建开发环境(开启了服务器)
监视文件变化,文件改变后,能够自动刷新浏览器
对于vue来说,可以将单文件组件(*.vue)类型的文件, 转化为浏览器能够识别的内容
项目打包上线: 基于vue脚手架只需要执行一条命令:npm run build 就可以对项目进行打包处理了
所有文件(css/js/html)的压缩合并
在打包的过程中,分离 或者 合并 文件
能够通过 代码分离功能实现 项目的按需加载(用到什么模块加载什么模块,懒加载)
命令行使用方式(了解即可)
// webpack 的使用步骤:
// 初始化一个package.json文件 : npm init -y
// 1 安装: npm i -D webpack webpack-cli
// 2 webpack 使用的两种方式:
// 2.1 命令行的使用方式(知道)
// 2.2 配置文件
// webpack的四个核心概念:
// 1 入口 entry
// 2 出口 打包后输出内容
// 3 loaders 加载器:对于非JS的静态资源
// 4 plugins 插件
// 演示命令行的使用方式:
// webpack 入口文件 出口文件路径
// 最基本的打包: webpack ./src/main.js
// 注意:使用 webpack 的时候应该提供mode, 可以是: production 或者 development
// production 表示: 生产模式(压缩的) -- 生产环境(也就是给用户使用的)
// development 表示: 开发模式 -- 开发环境(也就是给开发人员开发使用的)
// 指定模式: .\node_modules\.bin\webpack ./src/main.js --mode development
// 指定为生产模式: .\node_modules\.bin\webpack ./src/main.js --mode production
// 演示指定出口文件路径:
// .\node_modules\.bin\webpack ./src/main.js -o ./dist/a.js --mode production
const fn = () => {
console.log('main.js 中的fn 执行了')
}
fn()
main - 2 配置scripts去掉路径前缀.js
/*
.\node_modules\.bin\webpack ./src/main.js --mode development
解决问题: 去掉 .\node_modules\.bin\
1 在 package.json 的 scripts 中添加一个 build 脚本
2 将 webpack 命令作为 build 脚本的值 webpack ./src/main.js --mode development
3 在终端中执行命令: npm run build 来运行上面创建好的脚本
package.json文件
{
"name": "15-webpack-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack ./src/main.js --mode development",
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.0",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
*/
const fn = () => {
console.log('main.js 中的fn 执行了')
}
fn()
main - 3 webpack打包处理的过程.js
/*
webpack打包处理的过程::
案例: 使用jQuery实现隔行变色的效果
浏览器或者NodeJS中 都无法直接识别 import 语法,
但是, 经过webpack打包处理后, 浏览器就能够识别这个语法了
webpack打包处理的过程:
1 运行了webpack的打包命令: webpack ./src/main.js --mode development
2 webpack 就会找到我们指定的入口文件 main.js
3 webpack 就会分析 main.js 中的代码, 当遇到 import $ .... 语法的时候, 那么, webpack
就知道,我们要使用 jQuery 这个模块
4 webpack 就会将jQuery模块的代码拿过来
5 然后,继续往后分析, 如果在遇到 import 语法, 继续加载这个模块 ...
6 直到分析完成整个 JS 文件后, 将 main.js 中所有用到的模块代码 与 我们自己写的js代码
打包生成一个JS文件, 也就是 dist/main.js
CommonJS 中的模块化语法
const $ = require('jquery')
*/
// ES6 中的模块化语法:
import $ from 'jquery'
$('#list > li:odd').css('background-color', 'red')
$('#list > li:even').css('background-color', 'green')
webpack配置文件的使用(重点使用)
webpack 配置文件的使用方式:
在项目根目录中创建配置文件: webpack.config.js
/*
package.json文件
{
"name": "15-webpack-basic",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"build": "webpack", //项目完成打包,因为在根目录有webpack.config.js配置文件,所以可以直接使用webpack
"serve": "webpack-dev-server --hot", //开发期间使用(启动脚手架) hot表示热更新,代替下边的三步
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"css-loader": "^1.0.0",
"html-webpack-plugin": "^3.2.0",
"style-loader": "^0.23.0",
"webpack": "^4.19.0",
"webpack-cli": "^3.1.0",
"webpack-dev-server": "^3.1.8"
},
"dependencies": {
"jquery": "^3.3.1"
}
}
*/
// 注意: 不要使用 ES6 中的模块化语法 import/export
const path = require('path') //导入path模块,需要使用绝对路径
// const webpack = require('webpack') 01 热更新需要引入webpack
// 导入html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
// 入口
entry: path.join(__dirname, './src/main.js'),//__dirname指当前文件的目录
// 出口
output: {
path: path.join(__dirname, './dist'), //出口文件路径
filename: 'bundle.js' // 出口文件名
},
// 模式
mode: 'development',//开发环境(程序员看)
devServer: {
// 自动打开浏览器
open: true,
// 修改端口号
port: 3000,
// 热更新: 只将修改过得内容加载到页面中, 而不是刷新整个页面
// 第一步:02
// hot: true
},
// 配置loader
module: {
rules: [
// test 是一个正则, 用来匹配加载文件的路径
// 比如: import './css/index.css'
// use 表示使用哪个loader来处理这个类型的文件
// 注意: 有顺序!!!
// 处理过程是: 从右往左
// css-loader 读取CSS文件,将其转化为一个模块
// style-loader 拿到css-loader读取到的css文件内容,然后,创建一个style标签,插入到head
{ test: /\.css$/, use: ['style-loader', 'css-loader'] }
]
},
plugins: [
// 第二步:03
// new webpack.HotModuleReplacementPlugin(),
new HtmlWebpackPlugin({
// 指定模板文件路径
template: path.join(__dirname, 'index.html')
})
]
}
// html-webpack-plugin
// 作用:
// 1 根据指定的模板页面(index.html)在内存中生产一个新的页面
// 并且, 浏览器打开的就是 生成的页面
// 2 能够自动引入 css/js 等文件
// 使用:
// 1 安装: npm i -D html-webpack-plugin
// 2 在 webpack.config.js 中导入这个模块
// 3 在 plugins 中配置
// ES6 中的模块化语法:
import $ from 'jquery'
$('#list > li:odd').css('background-color', '#def')
$('#list > li:even').css('background-color', 'skyblue')
/*
开启服务器:
webpack-dev-server 开发期间的服务器
1 npm i -D webpack-dev-server 安装
2 开启服务器
3 自动打开浏览器
4 监视文件变化, 自动刷新浏览器
5 等等
使用步骤:
1 安装: npm i -D webpack-dev-server
2 在 webpack.config.js 中配置 devServer 配置项
3 在 package.json 中添加一个配置项: "serve": "webpack-dev-server"
webpack-dev-server 帮我们搭建了开发环境, 使用之后, 我们只需要
写代码完成功能即可, 其他的所有内容, 这个插件都帮我们处理了
webpack-dev-server 命令 和 webpack 命令的区别:
开发期间 webpack-dev-server
项目打包上线 webpack
webpack 命令会生产 dist 文件夹
webpack-dev-server 不会创建 dist 文件夹, 而是将所有内容放在内存中
*/
// ES6 中的模块化语法:
import $ from 'jquery'
$('#list > li:odd').css('background-color', '#def')
$('#list > li:even').css('background-color', 'skyblue')