01、为什么需要webpack
① 模块化开发（import，require）
② 预处理（Less，Sass，ES6，TypeScript……）
③ 主流框架脚手架支持（Vue，React，Angular）
④ 庞大的社区（资源丰富，降低学习成本）
打包是webpack最核心的功能，webpack其它所有的功能都是为了让打包这个功能更好。我们从一个简单的html页面介绍了通过webpack对模块进行打包，既保留了单个模块的可维护性，又减少了页面的http请求，减少了页面加载时间，从而增加了页面的显示速度，让整个应用的体验更好。
02、作用域问题
// gulp思想自执行函数
const result = (function(){
var name = 'zs';
return name;
})();
console.log(result);
03、webpack安装
- 首先要安装node，webpack依赖于node环境
- npm i webpack webpack-cli -g 全局安装
- webpack -v
- 若报错
bash: webpack: command not found - 在package.json文件中写入
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev": "node_modules/.bin/webpack"
},
-
webpack --stats detailed 全局的分析打包过程
-
npm uninstall webpack webpack-cli --global 卸载全局webpack
-
npx webpack --help 运行webpack
04、插件
使用HtmlWebpackPlugin插件自动化html文件自动引入资源
- npm i html-webpack-plugin -D
- webpack.config.js 里面配置
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 入口html
filename: 'app.html', // 打包后的名字
inject: 'body' // script 在哪个位置
})
]
05、mode模式
mode:'development', // 设置为开发模式
06、souce-map
devtool: 'inline-source-map', // 方便查看错误的代码在源代码的哪一行
07、npx webpack --watch npx webpack-dev-server
方便修改代码不用手动再次执行命令进行文件编译能自动刷新浏览器，提高开发效率和webpack编译效率 webpack-dev-server将打包后的文件存在物理内存中，在项目中看不见
08、资源文件
图片资源模块打包
// 第一种方式
module:{
rules:[
{
test: /\.png$/, // 图片资源
type: 'asset/resource',
generator: {
filename: 'images/[contenthash][ext]' // 优先级高于output中asssetModuleFilename
}
}
]
}
// 第二种方式
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, './dist'),
clean: true, // 清空dist目录
asssetModuleFilename: 'images/[contenthash][ext]' // 图片资源打包路径和名字
},
// 第三种方式
{
test: /\.jpe?g$|\.gif$|\.png$|\.svg$|\.ico$/,
loader: 'url-loader',
options: {
limit: 25000,
name: '[name].[hash:8].[ext]'
}
}
module:{
rules:[
{
test: /\.png$/, // 图片资源
type: 'asset/resource',
generator: {
filename: 'images/[contenthash][ext]' // 优先级高于output中asssetModuleFilename
}
},
{
test: /\.svg$/,
type: 'asset/inline' // base64格式
},
{
test: /\.txt$/,
type: 'asset/source'
},
{
test: /\.jpg$/,
type: 'asset', // 自动选择inline/resouce
parser: {
dataURlCondition: {
maxSize: 4 * 1024 * 1024 // 大于4M resouce 小于则inline
}
}
},
]
}
09、loader
webapck默认只能加载解析js\json文件，如果想加载和解析其他文件，我们就需要loader加载器
10、css loader
- npm i css-loader -D
- npm i style-loader -D
- npm i less-loader -D
{
test: /\.(css|less)$/,
use: ['style-loader', 'css-loader', 'less-loader'] // 从右到左的顺序， css-loader先解析css，然后style-loader将css配置出link
},
11、抽离css 自动在html里面增加link标签
- npm i mini-css-extract-plugin -D webpack5 可以使用的插件
plugins: [
new HtmlWebpackPlugin({
template: './src/index.html', // 入口html
filename: 'app.html', // 打包后的名字
inject: 'body' // script 在哪个位置
}),
new MiniCssExtractPlugin({
filename: "css/index.css"
}),
],
module:{
rules:[
{
test: /\.css$/,
use : [
MiniCssExtractPlugin.loader,
{ loader: "css-loader" }
]
},
{
test: /\.less$/,
use : [
MiniCssExtractPlugin.loader,
{ loader: "css-loader" },
{ loader: "less-loader" }
]
},
]
}
12、压缩css 优化项
- npm i css-minimizer-webpack-plugin -D
// 生产环境
mode:'production'
// 优化项配置
optimization:{
minimizer:[
new CssMinimizerPlugin()
]
}
13、加载font字体文件资源
- npm i file-loader -D
{
test: /\.(ttf|eot|woff|woff2|otf)$/,
loader: 'file-loader',
options: {
name: `fonts/[name].[hash:8].node.[ext]`
}
}
14、加载json5文件
- npm i json5 -D
{
test: /\.json5$/,
type: 'json', // 自动选择inline/resouce
parser: {
parse: json5.parse
}
}
15、使用babel-loader
- npm i babel-loader @babel/core @babel/preset-env -D
