序
上一篇已经把基本架子搭起来了, 现在来增加 CSS,SCSS, 自动生成 html,CSS 提取等方面的打包. webpack 默认只能处理 JS 模块, 所以其他文件类型需要做下转换, 而 loader 恰恰是做这个事情的, 来试试一步一步的完成这个事情吧.
1, 安装 normalize.CSS
normalize.CSS 是一种 CSS reset 的替代方案. 它在默认的 HTML 元素样式上提供了跨浏览器的高度一致性. 相比于传统的 CSS reset,Normalize.CSS 是一种现代的, 为 HTML5 准备的优质替代方案.
1 NPM install -D normalize.CSS
在 main.JS 引入
1 import 'normalize.css'
现在打包应该会报错, 因为还没安装 CSS-loader,style-loader
2, 安装 CSS-loader,style-loader
1 NPM i -D CSS-loader style-loader
loader 配置相关
在 webpack.config.JS 中增加 module 对象, 根据字面理解就是模块的相关配置
- module: {
- rules: [
- {
- test: /\.CSS$/,
- use: [
- { loader: 'style-loader' },
- { loader: 'css-loader' }
- ]
- }
- ]
- }
在 webpack.config.JS 配置文件中加入 module 属性, 该属性是一个对象, 在这个属性中有一个 rules 属性, 该属性的值为一个数组, 每一个数组成员都是一个对象, 可以配置不同的规则.
test:test 后是一个正则表达式, 匹配不同的文件类型
use: 在这个规则中, 当你匹配了这个文件后, 使用什么样的 loader 去处理匹配到的文件, use 接收的是一个数组, 意味着当他匹配到文件后, 它可以用多个的 loader 去处理这些文件.
use 中可以有字符串和对象, 当我们需要对 loader 进行额外的配置时, 需要用到对象, 如果我们使用的是 loader 默认的配置, 就直接字符串 (对应的 loader) 即可, 如
- {test: /\.CSS$/, use: 'css-loader'}
- // 等同于
- {test: /\.CSS$/, use: [{
- loader: 'css-loader'
- }]}
loader 还会有其他的一些属性比如 exclude,include 等, 具体可以参考: https://webpack.js.org/configuration/module/
loader 作用
style-loader 将模块的导出作为样式添加到 DOM 中
CSS-loader 解析 CSS 文件后, 使用 import 加载, 并且返回 CSS 代码
Less-loader 加载和转译 Less 文件
Sass-loader 加载和转译 Sass/SCSS 文件
postcss-loader 使用 PostCSS 加载和转译 CSS/SSS 文件
stylus-loader 加载和转译 Stylus 文件
loader 的加载顺序是从右到左, 所以顺序一定不要写反了.
现在一次运行打包命令, 应该可以成功打包了, 但是因为没有 HTML, 所以无法跑在浏览器上去, 当然我们可以在 dist 目录手动建立一个 HTML 文件, 然后手动引入打包成功的 JS, 但是这样太麻烦了, 我希望是打包的时候自动生成 HTML, 并且自动引入打包的 CSS.
我们可以利用 webpack 内置的 HtmlWebpackPlugin 插件来帮我们做上面的事情
3, 安装 HtmlWebpackPlugin,clean-webpack-plugin
1 NPM i -D HTML-webpack-plugin clean-webpack-plugin
HTML-webpack-plugin: 该插件将为您生成一个 HTML5 文件, 其中会使用 script 标签将您的所有 Webpack 捆绑包包括在内
clean-webpack-plugin: 主要是用来每次打包的时候清理 dist 目录, 我不希望里面还保留之前打包的文件
在 main.JS 同级目录建立 HTML 文件
webpack.config.JS 中配置 plugin
- plugins: [
- new CleanWebpackPlugin(),
- new htmlWebpackPlugin({
- title: '脱离脚手架',
- template: './index.html'
- })
- ]
增加对 SCSS 的支持, 安装 node-Sass Sass-loader
1 NPM i -D node-Sass Sass-loader
在 src 目录 style 目录下建立 相关 SCSS 文件, 同理在 rules 中增加对 SCSS 文件的转换
- {
- test: /\.SCSS$/,
- use: [{
- loader: 'style-loader'
- }, {
- loader: 'css-loader'
- }, {
- loader: 'sass-loader'
- }]
- }
4, 提取 CSS 到单独的文件
安装 mini-CSS-extract-plugin
优化之前的 loader 配置, 因为之前的 loader 配置有点重复(CSS-loader,style-loader 等写了多次), 其实完全可以只要把 test 的正则表达式优化下即可 如:
- module: {
- rules: [
- {
- test: /\.(sa|sc|c)ss$/,
- use: [
- {
- loader: miniCssExtractPlugin.loader,
- },
- 'css-loader',
- 'sass-loader',
- ], // 从右往左开始处理
- }
- ]
- }
重新打包应该可以看到下图
源码
https://github.com/ben-Run/webpack-learn
要是帮到你了可以点下 star, 哈哈~~~
来源: https://www.cnblogs.com/CandyManPing/p/11579774.html