1 概述
webpack 是一个前端资源加载/打包工具。它将根据模块的依赖关系进行静态分析,然后将这些模块按照指定的规则生成对应的静态资源。
作用
- 处理JS文件的依赖关系
- 处理JS文件的兼容问题
2 使用
目录结构
- webpack-demo
- dist
- bundle.js(打包后生成)
- src
- main.js
- main.html
- package.json(初始化后生成)
- webpack.config.js(配置文件)
- dist
2.1 全局打包
整体步骤:
- 安装:
npm i webpack webpack-cli -g
- 初始化:
npm init -y
- 打包
- 引入:在main.html文件中引入bundle.js文件
<script src="../dist/bundle.js"></script>
- 查看:浏览main.html文件可看到样式
1.完整打包命令:
- 打包:
webpack ./src/main.js(打包文件地址) -o ./dist/bundle.js(输出文件地址)
2.简化打包命令:(上述打包命令太长,通过配置简化打包命令)
- 配置:创建webpack.config.js文件进行配置
const path = require('path');
module.exports = {
//入口
entry:path.join(__dirname,'./src/main.js'),
//出口
output:{
//输出路径
path:path.join(__dirname,'./dist'),
//打包后的文件名称
filename:'bundle.js'
}
};
- 打包:
webpack
2.2 本地打包
- 安装:
npm i webpack webpack-cli -D
- 初始化:
npm init -y
1.手动打包
- 配置:
-
创建wbpack.config.js文件进行配置
const path = require('path'); module.exports = { //入口 entry:path.join(__dirname,'./src/main.js'), //出口 output:{ //输出路径 path:path.join(__dirname,'./dist'), //打包后的文件名称 filename:'bundle.js' } };
-
在package.json文件中配置
注意:冒号之前的名称可以根据项目需要命名,json文件中不可以写注释,会提示错误.{ "scripts": { "webpack": "webpack" } }
-
- 打包:
npm run webpack
2.自动打包
- 安装:
npm i webpack-dev-server -D
(自动打包编译工具) - 配置
-
在package.json文件中配置
{ "scripts": { "dev": "webpack-dev-server" } }
参数说明:
- open:自动打开浏览器
- port:自动设置端口
- contentBase:内容根路径
- hot:启用热更新
参数的配置:
- 第一种:直接在package.json文件中直接配置
{ "scripts": { "dev": "webpack-dev-server --open --port 3000 --contentBase src --hot" } }
- 第二种:在webpack.config.js文件中配置
//1.引入webpack const webpack = require('webpack'); module.exports = { devServer:{ open:true,//自动打开浏览器 port:3000,//端口 contentBase:'src',//托管根目录 hot:true//hot比较麻烦,需要三步:3.启用热更新 }, plugins:[ //2.new一个热更新的模块对象 new webpack.HotModuleReplacementPlugin() ] };
-
- 打包:
npm run dev
- 以后每一次只要保存,就会自动打包,不需要我们手动打包
- 将整个项目以一个localhost服务器方式运行起来,可以用
http://localhost:端口
访问
- 引入:
<script src="/bundle.js"></script>
- 手动打包:bundle.js是在dist目录下
- 自动打包:bundle.js是在根目录下(原因:webpack-dev-server打包的bundle.js存储在电脑内存中,没有存储在物理磁盘上,以一种虚拟的方式托管到根目录,看不见这个bundle.js文件)
2.3 整合统一
从上述自动打包我们可知,bundle.js存储在内存中,HTML在物理路径中,为了统一,使用插件html-webpack-plugin,将HTML也放入内存中,同时在main.html页面中也不需要引入物理磁盘上的bundle.js文件,html-webpack-plugin会自动将打包好的bundle.js文件追加到页面中
- 安装:
cnpm i html-webpack-plugin -D
- 配置:在webpack.config.js中
//导入HTML插件 const htmlWebpackPlugin = require('html-webpack-plugin'); module.exports = { plugins:[ //创建一个在内存中生成HTML页面的插件 new htmlWebpackPlugin({ //指定模板页面,根据指定的页面路径,生成内存中的页面 template:path.join(__dirname,'./src/main.html'), //指定生成页面的名称 filename:'main.html' }) ] }
- 打包:
npm run dev
3 loader
webpack默认只能打包js文件,无法处理非js文件,如果要处理非js文件需要手动安装第三方loader加载器
- 安装
- .css:
cnpm i style-loader css-loader -D
- .less:
cnpm i less-loader less -D
- .scss:
cnpm i sass-loader node-sass -D
- url:
cnpm i url-loader file-loader -D
(背景图片的使用:background:url(’’) ) - 字体图标:
npm i bootstrap -S
/cnpm i font-awesome -S
- .css:
- 配置:在webpack.config.js文件中
module.exports = { module:{ //配置所有的第三方加载器 rules :[//匹配规则 { test:/\.css$/,use:['style-loader','css-loader']}, { test:/\.less$/,use:['style-loader','css-loader','less-loader']}, { test:/\.scss$/,use:['style-loader','css-loader','sass-loader']}, /* 处理图片参数: 第一个:limit(给定的值是图片的大小,单位是byte) 图片大小<limit的值,不会转为base64格式字符串 图片大小>=limit的值,会转为base64格式字符串 第二个:name:name=[hash:6]-[name].[ext] 前面有6为hash值(原本32位)-图片原本的名称.图片原本的后缀名 */ { test:/\.(jpg|png|gif|jpeg|bmp)$/,use:'url-loader?limit=89796&name=[hash:8]-[name].[ext]'}, //字体图标后缀名 { test:/\.(eot|ttf|svg|woff|woff2)$/,use:'url-loader'} ] } };
- 引入:在main.js文件中(ES6语法)
- 文件的引入:
import '文件地址'
- 包的引入:
import *** from '***'
- 文件的引入:
4 ES6
在webpack中默认只能处理一部分ES6语法,更高级的语法不能处理,要处理需要借助第三方loader(Babel),将高级语法转换成低级语法,再去交给webpack打包,比如面向对象编程
- 安装
cnpm i babel-core babel-loader@7 babel-plugin-transform-runtime -D
cnpm i babel-preset-env babel-preset-stage-0 -D
- 配置:
- 在webpack.config.js文件中
module.exports = { module:{ //配置所有的第三方加载器 rules :[//匹配规则 { test:/\.js$/,use:'babel-loader',exclude:/node_modules/} ] } };
- 新建.babelrc文件配置
{ "presets":["env","stage-0"], "plugins":["transform-runtime"] }
- 在main.js中:
class Person { //static可以定义静态属性,可以用类名直接访问 static user= { id:1,name:'cxk'} } //访问静态属性 console.log(Person.user);
- 在webpack.config.js文件中