webpack4.x学习之路
一、概念
本质上，webpack是一个JavaScript应用程序的静态模块打包工具。其实就是把css、html、js、image可配置性的打包工具，实现项目模块化。
二、核心概念
- 入口（entry）： 以这个作为入口点，来打包其所相关的模块。
- 输出（output）： 输出入口打包后的bundle
- 模块（module）：相关打包所需要的loader集合
- 插件（plugins）：扩展插件，可以引入相关的插件，来优化和资源管理，注入相关的环境变量
- 模式（mode）：可根据不同的环境配置不同的参数，可选参数有development/production
三、webpack配置
1. 初始化项目以及安装webpack依赖
npm init -y
npm i webpack webpack-cli -D
2. 配置 webpack.config.js
const path = require('path');
module.exports = {
entry: {
index: 'src/js/index.js'
},
output: {
path: path.resolve(__dirname, 'dist'),
filename: '[name].[chunkHash:8].js'
}
};
在当前目录下输入webpack --mode=production打包
3. 使用模板html
html-webpack-plugin 可以指定template文件，然后将相关依赖的js，引入到其页面
安装依赖：
npm i -D html-webpack-plugin
在webpack.config.js中增加配置：
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// ... other codes
plugins: [
new htmlwebpackplugin({
filename: 'index.html',
minify: {
removeAttributeQuotes: true
},
hash: true,
chunks: ['index'],
template: './src/index.html'
}),
]
}
4. 加载css文件
加载css文件要依靠相关的loader的转化成js类型，所涉及到的loader有style-loader, css-loader。
可通过以下命令来安装依赖
npm i -D style-loader css-loader
在webpack.config.js中的配置如下：
module.exports = {
//other codes
module: {
rules: [
{
test: /\.css$/,
use: [{
loader: 'style-loader',
options: {
insertAt: 'top'
}
},
'css-loader'
],
//....
}
]
}
}
这里面牵扯到几个概念：
- test： 匹配你需要转换的文件扩展名的正则表达式
- use: 所使用相关的loader的名称
- include/exclude: 所必须处理的文件夹或不需要处理的文件夹
- query: 其他相关的配置选项
相关的css在js中引入才会打包到其相关的模块中
5. 图片加载
图片加载相关的依赖有：
npm i -D file-loader url-loader
在webpack.config.js 中增加loader的配置如下：
module.exports = {
//other codes
module: {
rules: [
{
test: /\.(gif|jpg|png)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 500,
outputPath: 'images'
}
}
]
}
]
}
}
其实这只是打包css中的图片，如果是页面中用img标签引入的图片，打包仍会报错，下面通过html-withimg-loader来打包
安装依赖：
npm i html-withimg-loader -D
webpack.config.js的配置
module: {
// other codes
rules: [{
test: /\.(html|htm)$/i,
use: ['html-withimg-loader']
}]
}
....未完待续
