webpack 概念: 前端工程化解决方案
webpack 功能:提供了友好的模块化开发支持,以及代码压缩混淆,浏览器端javascript兼容性,性能优化等强大的功能
webpack好处: 让前端开发者更专注于功能开发,提高了项目开发效率,以及项目的可维护性
目录
安装webpack 跟 webpack-cli 让其支持webpack
npm init -y
生成package.json 文件
在根目录下新建 src 目录
目录中新建 index.js 跟 index.html
安装webpack 跟 webpack-cli 让其支持webpack
npm install webpack webpack-cli -D
在根目录下新建webpack.config.js 在里面写代码
module.exports = {
mode:'development'
}
mode 可选值
development 生成代码的速度快 代码体积大
production: 生成的代码速度慢 代码体积小
webpack 的4.x, 5.x默认约定:
打包入口 src->index.js
输出 dist->main.js
可以通过webpack.config.js 中对应的参数 修改入口跟输出
module.exports = {
mode:'development',
entry:path.join(__dirname,'./src/index.js'),
output:{
path:path.join(__dirname,'dist'), //地址
filename:'script/bundle.js' //dist/script/bundle.js输出文件名称
}
}
设置webpack server
npm install webpack-dev-server -D
安装好之后 在package.json 中 修改dev
module.exports = {
script:'webpack serve'
}
安装html-webpack-plugin 将html生成到根目录的内存中
npm install html-webpack-plugin -D
使用 html-webpack-plugin
//在webpack.config.js中使用
const HtmlPlugin = require('html-webpack-plugin')
const htmlPlugin = new HtmlPlugin({template:'./src/index.html',filename:'index.html'})
module.exports = {
plugins:[htmlPlugin]
}
template :要复制的的html文件 filename : 生成的文件名称
在webpack 中设置devserver
三个参数 port open host 分别是 端口号 是否启动热服务后 直接打开默认浏览器 这只地址
module.exprts = {
deveServer :{
port:80,
open:true,
host:'127.0.0.1'
}
}
处理css 文件
npm install style-loader css-loader -D
在webpack.config.js 进行配置
module.exports = {
module:{rule:
[test:'/\.css$/',use:['style-loader','css-loader']
}
}
test 表示匹配的文件类型, use 表示要调用的loader
注意 : use 数组中指定的loader顺序是固定的
多个loader 的顺序应该是从后往前调用。
打包处理less文件
npm install less-loader less -D
同样的跟上边一行 在webpack.config.js中
module:{
rules:{
{test:/\.less$/,use:['style-loader','css-loader','less-loader']}
}
}
打包处理 样式表中与url 相关的文件,例如 img
npm install url-loader file-loader -D
添加的规则如下
{test:/\.jpg|png|gif$/,use:'url-loader?limit=22222&outputPath=image']}
limit 是图片的大小 outputPath是打包后的文件存放地址
打包js文件中的高级语法
babel 修饰器插件官网地址 @babel/plugin-proposal-decorators · Babel 中文网
npm install babel-loader @babel/core @babel/plugin-proposal-decorators
在根目录城建 babel.config.js,并放入一下内容
module.exports = {
plugins: [["@babel/plugin-proposal-decorators", { legacy: true }]],
};
再在webpack.config.js 中 进行规则配置如下
{
test:/\.js$/,use:'babel-loader',exclude:'./node-module'
}
exclude 排除 include 包含
clean-webpack-plugin
在生成新的dist文件时 自动删除 dist 老文件
npm install clean-webpack-plugin -D
使用
const {CleanWebpackPlugin} = require(clean-webpack-plugin)
const clean = new CleanWebpackPlugin()
module.exports = {
plugins:[clean]
}