一、webpack 是什么?
webpack 是一个模块打包工具,不仅可以减少网络流量,还能减少服务器请求,减轻服务器压力。
二、怎么使用?
下面是一个简单打包 css 文件的步骤。
1、新建项目
-
初始化 webpack 项目,包括配置文件
# 1、初始化一个新的 webpack 项目 mkdir learn-webpack cd learn-webpack npx webpack-cli init # 2、按照下面选择进行 ? Which of the following JS solutions do you want to use? none ? Do you want to use webpack-dev-server? No ? Do you want to simplify the creation of HTML files for your bundle? Yes ? Do you want to add PWA support? No ? Which of the following CSS solutions do you want to use? none ? Do you like to install prettier to format generated configuration? No ? Pick a package manager: npm
2、增加 css
-
新建 src/style.css 文件,复制下面代码到文件。
h2 { color: red; }
-
修改 src/index.js 文件,如下:
import './style.css'; console.log("Hello webpack!")
-
修改 webpack.config.js 文件,增加下面 css 相关配置:
module: { rules: [ { test: /\.(eot|svg|ttf|woff|woff2|png|jpg|gif)$/i, type: 'asset', }, { test: /\.css$/i, use: ['style-loader', 'css-loader'], }, // Add your rules for custom modules here // Learn more about loaders from https://webpack.js.org/loaders/ ], },
-
安装 css 的 load 插件
npm install style-loader css-loader
3、运行项目
-
命令
# 执行转换 npm run build
完成后,项目根目录会产生 dist
文件夹,浏览器可打开 index.html 文件查看效果,src 中的css 文件已经被打包了。
三、重要概念
1、webpack-cli
命令行界面(CLI), 用于配置构建并与之交互。
# 安装
npm install webpack-cli
# 运行 webpack
npx webpack build
# 新建 webpack 项目
npx webpack init
2、配置文件
npx webpack init
可以快速新建 webpack 项目,包括配置文件。
3、loader
webpack 默认只能解析 JavaScript 和 JSON 文件,loader 让 webpack 能够处理其他类型文件。
-
babel-loader :可以让 webpack 把 ES2015+语法、JSX 写的代码 转换成 JavaScript 代码;
-
less-loader :可以让 webpack 把 less 语法写的代码 转换成 css 代码;
4、plugin
可以让 webpack 更容易使用,譬如上面新建的 webpack 项目中,就用到了 html-webpack-plugin
插件,该插件将为你生成一个 HTML5 文件, 在 body 中使用 script
标签引入所有 webpack 生成的 bundle。
修改 webpack.config.js
四、案例场景
1、怎么打包 less 文件?
步骤跟上面打包css 相同,只需配置文件和安装loader!详细步骤,看这里!