一. webpack有何作用
webpack是一个Javascript应用程序的模块打包器。它可以递归地构建一个应用程序的模块依赖关系图,然后将所有模块打包在一起。
为什么需要模块打包器:现在的应用程序模块文件很多,如果不打包会造成频繁的网络请求,不适用于生产环境;同时模块规范如ES Modules仍存在兼容问题。
模块打包工具做什么:编译代码的新特性,把各种不同类型的资源模块打包。
webpack核心工作原理: 找到入口文件(通常是一个js文件),找到入口文件依赖的各个模块,形成一棵模块依赖树,用Loader来加载处理每个模块,并把处理后的内容打入输出文件(通常命名为bundle.js)。
二. webpack安装和使用
1. 安装
cnpm install --save-dev webpack webpack-cli
2. 项目根目录下创建webpack配置文件,webpack.config.js:
const path = require('path')
/** @type { import('webpack').Configuration } */
module.exports = {
mode: "none", // 打包模式 production | development | none
entry: './src/main.js', // 打包入口文件
output: { // 打包输出文件名称和目录
filename: 'bundle.js',
path: path.join(__dirname, 'output'), // 输出文件目录需绝对路径
// publicPath: 'output/', // 默认为''表示网址根目录
},
module: {
rules: [
{
test: /.js$/,
use: {
loader: 'babel-loader',
options: {
presets: ['@babel/preset-env']
}
}
},
{
test: /.css$/, // 匹配 .css 文件
use: [ // 对匹配文件 从后到前 执行 loader
'style-loader', // 把 打包成的 js 代码,挂载到 Document
'css-loader', // 将 .css 文件打包为 js代码
]
},
{
test: /.jpeg$/,
use: 'file-loader'
},
{
test: /.jpeg$/,
use: {
loader: 'url-loader',
options: {
limit: 10 * 1024 // 10 KB
}
}
},
{
test: /.html$/,
use: {
loader: 'html-loader',
options: {
attrs: ['img:src', 'a:href']
}
}
}
]
}
}
3. 打包
执行如下命令,完成打包:
yarn webpack
执行后,可在项目根目录下发现打包后的文件夹 output 。
本文 完。