一. 实现 webpack 项目初始化及相关包和插件的安装
- 可以参考:
初识 Webpack_小豪boy的博客-CSDN博客一、Webpack是什么webpack是静态模块打包器,当webpack处理应用程序时,会将所有这些模块打包成一个或多个文件。webpack可以处理的模块包括js/css/图片、图标字体等单位。静态:开发过程中存在于本地的js/css/图片/图标字体等文件,就是静态的。动态的内容,webpack没办法处理,只能处理静态的。官网:webpack 中文文档 | webpack 中文网。二、Webpack初体验1.初始化项目①...
https://blog.csdn.net/qq_34771938/article/details/120535378?spm=1001.2014.3001.5501
Webpack 的 4 个核心概念_小豪boy的博客-CSDN博客一、准备工作1.根据已有的 package.json 文件安装需要的包。2. 打开命令行工具,输入命令 : npm install3. 安装完成后,项目文件夹中会多出一个 node_modules 文件夹,用于存放安装的包。二、entry官方文档:入口起点(entry points) | webpack 中文网入口起点(entry point)指示 webpack 应该使用哪个模块,来作为打包的开始。进入入口起点后,webpack 会找出有哪些模块和库是入口https://blog.csdn.net/qq_34771938/article/details/120541191?spm=1001.2014.3001.5501
- 安装完成后 package.json 包含以下依赖:
二. 安装 css-loader
- 使用文档:css-loader | webpack 中文网 。
- css-loader 可以让 js 文件通过 import 加载 css 文件。
- 安装命令: npm install --save-dev html-webpack-plugin@4.3.0
- 安装完整后,添加配置规则。
- 运行打包:npm run webpack
- 最后HTML打开后的效果如下:
注:并没有显示出我们设置的红色背景。
三. 安装 style-loader
- 使用文档:style-loader | webpack 中文网
- style-loader 将模块的导出作为样式添加到 DOM 中,等同于内嵌式(<style></style>)的添加方式。
- 安装命令: npm install --save-dev style-loader@1.2.1
- 安装完成后,添加配置。
- 运行打包:npm run webpack
- 最后HTML打开后的效果如下:
注:可以成功显示红色背景。
四. 补充外链式的添加方式,需要安装 mini-css-extract-plugin 插件
- 使用文档:mini-css-extract-plugin: Lightweight CSS extraction plugin。
- 将CSS提取为独立的文件的插件,对每个包含css的js文件都会创建一个CSS文件。
- 安装命令:npm install --save-dev mini-css-extract-plugin@0.9.0
- 安装完成后,添加配置。
const MiniCssExtractPlugin = require("mini-css-extract-plugin"); module.exports = { plugins: [new MiniCssExtractPlugin()], module: { rules: [ { test: /\.css$/i, use: [MiniCssExtractPlugin.loader, "css-loader"], }, ], }, };
- 运行打包:npm run webpack
- 最后HTML打开后的效果如下: