脱离脚手架来配置、学习 webpack4.x (二)基础搭建loader 配置 css、scss
序
上一篇已经把基本架子搭起来了,现在来增加css、scss、自动生成html、css 提取等方面的打包。webpack 默认只能处理js模块,所以其他文件类型需要做下转换,而loader 恰恰是做这个事情的,来试试一步一步的完成这个事情吧。
1、安装 normalize.css
normalize.css是一种CSS reset的替代方案。它在默认的HTML元素样式上提供了跨浏览器的高度一致性。相比于传统的Css reset,Normalize.css是一种现代的、为HTML5准备的优质替代方案。
npm install -D normalize.css
在main.js 引入
import 'normalize.css'
现在打包应该会报错,因为还没安装css-loader、style-loader
2、安装 css-loader、style-loader
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
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
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
&n 576 bsp; 要是帮到你了可以点下star, 哈哈~~~
- 手动搭建webpack4.x+vue2.x 基础结构(二)实际开发中配置
- 前端构架配置(二):node.js、 webpack、css-loader、html-loader、style-loader、webpack-dev-server等插件安装总出错解决方式
- 【webpack系列】webpack4.x入门配置基础(一)
- webpack学习笔记-1-css-loader & style-loader
- webpack配置开发环境(html-webpack-plugin、css-loader、less-loader、babel-loader)
- webpack配置css相关loader注意先后顺序
- 详解webpack之scss和postcss-loader的配置
- vue-cli脚手架中webpack配置基础文件详解
- vue-cli脚手架中webpack配置基础文件
- VUE学习笔记——vue+webpack脚手架搭建
- webpack.config.js用来写测试的基本配置,引入了css-loader以及typescript
- node+webpack环境搭建 vue.js 2.0 基础学习笔记
- webpack4.x 基础配置
- 基于webpack4.X从零搭建React脚手架的方法步骤
- Scss开发临时学习过程||webpack、npm、gulp配置
- webpack手动搭建vue项目(一)—— 安装环境和基础配置
- 手把手教你webpack3(11)PostCSS-Loader配置简述
- 关于webpack2.0里面css-loader的参数ImportLoaders配置出错
- 手动搭建webpack4.x+vue2.x 基础结构
- vue-cli脚手架build目录中的webpack.prod.conf.js配置文件