首页  思维导图  详情

webpack

2021-11-05 14:13:01   4  举报





AI智能生成

简单学习webpack用法

webpack

作者其他创作

大纲/内容

介绍

静态模块打包工具

模块化

打包

安装

安装到目录

# npm i -D 是 npm install --save-dev 的简写，是指安装模块并保存到 package.json 的 devDependencies # 安装最新稳定版 npm i -D webpack # 安装指定版本 npm i -D webpack@<version> # 安装最新体验版本 npm i -D webpack@beta

安装到全局

npm i -g webpack

额外安装

npm i -g webpack-cli

webpack -v

显示webpack-cli 和显示webpack版本就ok了

从 Webpack2 开始，已经内置了对 ES6、CommonJS、AMD 模块化语句的支持。

使用

Loader

Loader 可以看作具有文件转换功能的翻译员，配置里的 module.rules 数组配置了一组规则， 告诉 Webpack 在遇到哪些文件时使用哪些 Loader 去加载和转换。

处理css

安装：npm i -D style-loader css-loader

module: {     rules: [       {         // 用正则去匹配要用该 loader 转换的 CSS 文件         test: /\.css$/,         use: ['style-loader', 'css-loader?minimize'],       }     ]   }

如上配置告诉 Webpack 在遇到以 .css 结尾的文件时先使用 css-loader 读取 CSS 文件，再交给 style-loader 把 CSS 内容注入到 JavaScript 里。  在配置 Loader 时需要注意的是： use 属性的值需要是一个由 Loader 名称组成的数组，Loader 的执行顺序是由后到前的； 每一个 Loader 都可以通过 URL querystring 的方式传入参数，例如 css-loader?minimize 中的 minimize 告诉 css-loader 要开启 CSS 压缩。

Plugin

Plugin 是用来扩展 Webpack 功能的，通过在构建流程里注入钩子实现，它给 Webpack 带来了很大的灵活性。

http://webpack.wuhaolin.cn/1%E5%85%A5%E9%97%A8/1-5%E4%BD%BF%E7%94%A8Plugin.html

DevServer

安装：npm i -D webpack-dev-server