一、为什么需要打包工具
开发时,我们会使用框架(React、Vue),ES6 模块化语法,Less/Sass 等 css 预处理器等语法进行开发。
这样的代码要想在浏览器运行必须经过编译成浏览器能识别的 JS、Css 等语法,才能运行,所以我们需要打包工具帮我们做完这些事。
除此之外,打包工具还能压缩代码、做兼容性处理、提升代码性能等。
Webpack功能有限:
开发模式:仅能编译JS中的 ES Moudle语法
生产模式:能编译JS中的 ES Moudle语法,且能压缩 JS 代码
二、webpack——引入js文件
//Step1:初始化
npm init -y
//Step2:下载依赖
npm i webpack webpack-cli -D
//-D表示安装到开发环境中
//webpack-cli是核心(webpack依赖于webpack cli,如果没有安装webpack就会报错)
//执行webpack命令,会执行node_modules下的.bin目录下的webpack
//Step3:项目根目录demo文件夹——src文件夹——app.js & m1.js
//m1.js
export default 'fighting Evelyn';
//app.js
import m1 from './m1'
console.log(m1)
//Step4:启用webpack
//使用npx命令,即去当前项目的 `node_modules/.bin` 下找 `webpack.cmd` 命令
npx webpack ./src/app.js --mode=development //开发模式
npx webpack ./src/app.js --mode=production //生产模式
//npx webpack:用来运行本地安装的webpack包
//文件名:指定webpack从哪个文件开始打包,不但会打包该文件,还会将其依赖也一起打包
//--mode=xxx:指定环境/模式
//Step5:在public文件夹中的index.html文件(index.html表示默认的页面)
【注】:npm初始化后,package.json文件中的name字段不能叫 webpack, 否则下一步会报错(也就是项目的根目录文件名,不能直接叫webpack)。
【注】:Webpack本身功能比较少,只能处理js和json资源,一旦遇到css等其他资源就会报错。
npx和npm一样,不需要额外安装
【注】:开发环境下可以看到哪些模块参与了打包,生产环境只注重打包结果,最后产生了dist文件夹的main.js
三、package.json中配置脚本
{
"scripts":{
"dev":"npx webpack --config ./config/webpack.config.js",
"start":""
}
}
【注】:npm run ‘别名’,当别名是start时,run可以省略
四、配置webpack
webpack打包的五大核心:
(1)entry——打包入口文件地址
(2)output——打包文件出口路径
(3)mode——打包模式
(4)module——加载器
(5)plugin——插件
【注】:前三个属性可以单独为以.js结尾的文件进行打包,但是如果文件结尾为.css/.less/png/jpg/gif/mp4/woff,则需要模块以及插件来支持。
【注】:这个对象中的五个属性书写没有任何的顺序,一般情况下,按照入口、出口、模块、插件、模式等等
五、webpack——引入css文件
//Step1:下载两个加载器loader
//npm i css-loader style-loader -D
//Step2:webpack.prod.js文件中,向外暴露一个对象
module.exports = {
//打包的入口文件地址是针对于运行终端来说,而非webpack.prod.js和src目录之间的关系
entry:"./src/js/app.js",
output:{
//path属性是语法,不能修改,后面的值是一个绝对路径,自动产生一个路径,需要借助于node中的内置模块——path
//path和filename,属性名称是固定的
path:path.resolve(__dirname,'../dist'),
filename:'js/bundle.js',
//每一次重新打包的时候都会将上一次的结果清除掉
clean:true
},
//打包模式
mode:'production',
//加载器(loader)
module:[
{
//rules规则,rules中存放的是一个数组,数组中放着对象的值,也就是说,有一条规则,就会配置一个对象。
rules:[
{
//test是正则中的检测,正则规则
test: /\.css$/i,//也可以是/[.]css$/i,为了将.转义成普通字符
use:['style-loader', 'css-loader'],
//如果是一个加载器,use后面是一个字符串
//如果有多个加载器,use后面是一个数组,数组的执行顺序是由右向左,
//css-loader:加载.css文件,解析css语法,返回css语句
//style-loader:在index.html的head中添加style标签
}
]
}
]
}
//Step3:添加css资源(在src/css/index.css文件中)
.box1 {
width: 100px;
height: 100px;
background-color: pink;
}
//Step4:在主入口文件中引入css,webpack才会将其打包
import "../css/index.css";
//Step5:在index.html页面中,引入js文件
<script src="../dist/js/bundle.js"></script>
六、处理HTML资源
是指,将public文件夹下的index.html文件打包,并放在dist文件夹根目录。
//Step1:安装包 npm i html-webpack-plugin -D
//Step2:在webpack.prod.js文件中,配置插件
const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
//插件
plugins: [
new HtmlWebpackPlugin({
//需要打包的html文件路径什么?
template: path.resolve(__dirname, "../public/index.html"),
//打包之后的文件叫什么?
filename:'index.html',
//将打包后的bundle.js文件自动添加到打包后的index.html文件中
//并放在body标签中
inject:'body'
})
]
};
//Step3:去掉index.html代码中的引js、css的标签(script和link标签)
七、开发服务器&自动化
每次写完代码都需要手动输入指令才能编译代码,太麻烦了,我们希望一切自动化
//Step1:安装包
//npm i webpack-dev-server -D
//Step2:配置(在config文件夹中webpack.dev.js文件中:)
//导入
const ProdConfig = require('./webpack.prod');
//暴露
module.exports = {
...ProdConfig,
//打包模式
mode: 'development',
//配置开发服务器
devServer: {
//主机地址:
host: 'localhost',
//端口号
port: 3000,
//是否自动打开浏览器
open: true
},
//源代码和构建后的代码需要产生一个映射关系
devtool: 'cheap-module-source-map'
}
//Step3:运行指令
npx webpack server --config ./config/webpack.config.js
//也可以在package.json文件中的scripts中配置start
//这样在终端可以直接:npm start
八、Map映射
module.exports = {
// 其他省略
mode: "production",
devtool: "source-map",
};
module.exports = {
// 其他省略
mode: "development",
devtool: "cheap-module-source-map",
};
//会产生如下文件:bundle.js.map