这是我参与「第五届青训营 」伴学笔记创作活动的第 9 天
一、本堂课重点内容：
- webpack概念
- 配置webpack的基础用法
二、详细知识点介绍：
webpack概念
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler) 。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph) ，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
五个核心的概念：
Entry 入口，指示 webpack 以哪个文件为入口起点开始打包，分析构建内部依赖图。
Output 输出，指示 webpack 打包后的资源 bundles 输出到哪里去，以及如何命名。
Loader 让 webpack 能 够 去 处 理 那 些 非 JavaScript 文 件 (webpack 自 身 只 理 解 JavaScript)
Plugins 插件，可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩， 一直到重新定义环境中的变量等。
Mode 模式，指示 webpack 使用相应模式的配置。
三、实践练习例子：
基本用法
关于webpack的用法，基本围绕着"配置"展开，大致可分为两类，
流程类：作用于流程中，直接影响打包效果的配置项
工具类：除流程之外，提供更多工程化能力的配置项
流程类配置
输入（entry，context）-> 模块解析（resolve，externals）-> 模块转译（module）->后处理（optimization，mode，target）
配置webpack
webpack.config.js:
声明入口
module.exports = {
entry: './src/js/index.js'
}
声明出口
module.exports = {
entry: './src/js/index.js'，
output: { // 输出配置
filename: './built.js', // 输出文件名
path: resolve(__dirname, 'dist'), //打包后的输出位置
filename: 'scripts/[name].[contenthash].js', //'bundle.js', //打包后的文件名 多个入口不能写固定一个名字
clean: true, //打包后清除上次内容
assetModuleFilename: 'images/[contenthash][ext]', //静态文件打包地址/文件名
publicPath: ''
},
}
添加Loader
npm add -D css-loader style-loader less-loader url-loader babel-loader
添加module处理文件
module: {
rules: [
// 详细loader配置
{
test: /\.(jpg|gif|png)/,
use: 'url-loader',
option: {
esModule: true,
limint: 5 * 1024, //图片是否转base64
name: '[hash: 10].[ext]' //图片命名
}
},
{
test: /\.(css|less)$/,
// use: ['style-loader', 'css-loader', 'less-loader'] //从后往前编译 先解析在编译 行内样式
use: ['MinCssExtractPlugin.loader', 'css-loader', 'less-loader'], //把css文件打包到一个css 用link引入到html中
},
{
test: /\.js$/,
exclude: /node_modules/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env'],
plugins: [
[
'@babel/plugin-transform-runtime' //为promise解决
]
]
}
}
}，
]
},
开启HMR（热启动）
devServer: { //实时更新
static: './dist'，
hot: true, //开启热更新
compress: true, // 启动gzip压缩
port: 3000, // 端口号
open: true // 自动打开浏览器
proxy: { //代理
'/api': {
target: 'http://localhost:3000',
changeOrigin: true,
ws: true,
pathRewrite: {
'^/api': ''
}
}
}
},
启动Webpack
npx webpack serve
四、课后个人总结：
以上就是webpack的基本认识了，对于新手来说可能会有一点难理解，知识点会比较抽象，但webpack是前端都要接触到的打包工具。主要难点在于理解Loader和Plugin(插件)的原理，但目前先学习好它的基础用法。
