webpack — 基础介绍
2022年9月12日初识webpack
webpack默认配置文件：webpack.config.js。
|
1 |
webpack --config <fileName> //可以通过 config参数指定配置文件 |
配置文件的主要组成
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 |
const webpackBaseConfig = { entry: './src/index.js', // 打包入口文件 默认值 ./src/index.js output: './dist/main.js', // 打包输出 默认值 ./dist/main.js mode: 'development', // 环境配置 production development none module: { // Loader 加载配置 主要预处理scss less 和一些js 语法 rules: [ { test: /\.jsx?$/, use: 'babel-loader', exclude: /node_modules/, } ], }, plugins:[ //添加一些插件实现更多功能 new webpack.HotModuleReplacementPlugin(), // 热更新插件 ] }; |
简单案例
1.创建 webpack.config.js 文件,填写内容
|
1 2 3 4 5 6 7 8 9 10 |
const path = require("path"); module.exports = { mode: "production", entry: './src/index.js', output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" } } |
2 创建 src/helloworld.js 和 src/index.js文件
src/index.js
|
1 2 3 |
import { helloworld } from './helloworld'; document.write(helloworld()); |
src/helloworld.js
|
1 2 3 |
export function helloworld() { return 'Hello webpack'; } |
通过webpack命令运行
|
1 |
./node_modules/.bin/webpack |
通过npm script 运行
|
1 2 3 4 5 6 7 8 9 10 |
· · · "scripts": { "test": "echo \"Error: no test specified\" && exit 1", "build": "webpack" }, · · · |
然后运行
|
1 |
npm run build |
Entry的用法 和 output的用法
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 |
//单入口写法 module.exports = { entry: './src/index.js', output: { path: path.resolve(__dirname, "dist"), filename: "bundle.js" //[name].js可以写成这样 } } //多入口写法 入口文件是多个出口文件也要是多个 module.exports = { entry: { app:'./src/app.js', adminApp:'./src/adminApp.js' }, output: { path: path.resolve(__dirname, "dist"), filename: "[name].js" } } |
Loaders
webpack开箱即用只支持js和json两种文件类型，通过Loaders支持其他文件类型并且把它转换成有效的模块，并且可以添加到依赖图中 Loaders本身是一个函数，接收源文件作为参数，返回转换的结果
| 组件 | 说明 |
|---|---|
| babel-loader | 为了使JavaScript更好的兼容 es6 es7 |
| css-loader | 支持css文件的加载和解析 |
| less-loader | 将less转换为css |
| ts-loader | 将ts转换为js |
| file-loader | 进行文字图片的打包 |
| raw-loader | 将文件以字符串的形式导入 |
| thread-loader | 多进程打包 |
Loaders的配置
|
1 2 3 4 5 6 |
module: { rules: [ //test匹配规则 use使用的loader的名称 {test: /\.txt$/, use: 'raw-loader'} ] } |
Plugins
插件用于 bundle(可执行文件) 文件的优化，资源管理和环境变量注入，作用与整个构建过程
| 名称 | 描述 |
|---|---|
| CommonsChunkPlugin | 将Chunk相同的模块代码提取成公共js |
| CleanWebpackPlugin | 清理构建目录 |
| ExtractTextWebpackPlugin | 将css从bunlde文件里提取成一个独立的css文件 |
| CopyWebpackPlugin | 将文件或文件夹拷贝输出到目录 |
| HtmlWebpackPlugin | 创建html文件去承载输出的bunlde |
| UglifyjsWebpackPlugin | 压缩js |
| ZipWebpackPlugin | 将打包的资源生成一个zip |
Plugins的配置
|
1 2 3 |
plugins: [ new HtmlWebpackPlugin({template: './src/index.html'}) ], |
mode
通过将 mode 参数设置为 development、production 或 none，您可以启用 webpack 与每个环境对应的内置优化。默认值为production。
| 选项 | 描述 |
|---|---|
| development | 开启 NamedChunksPlugin 和 NamedModulesPlugin |
| production | 开启 FlagDependencyUsagePlugin、FlagIncludedChunksPlugin、ModuleConcatenationPlugin、NoEmitonErrorsPluginOccurrenceOrderPlugin、SideEffectsFlagPlugin、TerserPlugin |
| none | 不开启任何优化选项 |
