webpack指北
什么是webpack
引用官方的一句话：
webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具
简单来说，webpack就是一个可以把项目文件打包起来的工具，打包的含义体现在将多个文件打包成一个大文件。当然，还有各种功能丰富的插件丰富webpack的功能，webpack主要用来如下事情：
- 将多个同类型文件汇聚成一个文件，如js、css,减少文件请求次数
- js代码编译，将新语法编译成旧语法，如ES6转ES5，提升兼容性
- 代码压缩，缩小体积
使用前准备
准备环境：nodejs以及npm包管理器 安装：推荐官方教程 在项目根目录中安装
npm install webpack webpack-cli --save-dev 注：webpack版本为5以上。
开始学习
打包构建命令
在package.json文件中，scripts下增加
"build": "webpack",
之后每次使用如下指令即可进行打包构建
npm run build
打包编译JS
webpack自带打包js的功能，不需要安装任何插件。 在webpack.config.js的module.exports中，增加如下内容即可
module.exports = {
mode:'development', // 打包模式 production 生产模式（代码压缩），development 开发模式
entry: './src/index.js', //打包入口目录
output: {
filename: 'main.js', // 输出js文件名
clean: true, // 每次打包先清空disk目录
},
}
文件名哈希后缀
如果每次构建完的文件名都一样，比如style.css,main.js，由于浏览器会自动缓存文件，会导致浏览器复用上一次加载的文件，导致网页内容不能及时更新。 于是webpack提供了这个功能，它可以以文件内容生成的哈希作为文件名后缀，保证每次更新了js或css内容后打包出的文件名都不一样，防止浏览器使用缓存内容。 使用方法： 修改webpack.config.js中output下的filename
filename: 'main[contenthash].js', // 输出js文件名（哈希后缀）
自动生成index.html
引入sass less stylus
- sass 加载器 安装加载器(node sass已过时，使用dart sass)
npm install sass-loader dart-sass --save-dev webpack.config.js中的rules增加以下规则
rules: [
{
test: /\.scss$/i,
use: ["style-loader",
"css-loader",
{
loader: 'sass-loader',
options: {
implementation:require('dart-sass')
}
}
],
},
],
- less加载器 安装加载器
npm install less-loader less --save-dev
webpack.config.js中的rules增加以下规则
{
test: /\.less$/i,
use: ["style-loader", "css-loader", "less-loader"],
},
3.stylus加载器 安装加载器
npm install stylus-loader stylus --save-dev
webpack.config.js中的rules增加以下规则
{
test: /\.styl$/i,
use: ["style-loader", "css-loader", "stylus-loader"],
},
使用file-loader加载图片
安装加载器
npm install file-loader --save-dev
webpack.config.js中的rules增加以下规则
{
test: /\.(png|svg|jpg|gif)$/i,
use: [ "file-loader"],
},
实现懒加载
使用import(),会返回一个promise对象，在then方法成功回调中执行脚本。
const p = import('./lazy')
p.then(
(moudle) => { moudle.default() },
()=>{console.log('懒加载错误')}
)
