Webpack打包css文件教程 |
您所在的位置：网站首页 › webpack打包命令 › Webpack打包css文件教程 |
Webpack打包css文件教程
|
一,前言
之前"webpack介绍"一篇中提到webpack的四个核心概念:
entry-入口,output-出口,loader-加载器,plugins-插件
前面打包和输出文件使用了entry和output
之前说过Webpack只能处理js和Json格式的文件,所以css,图片这些不是webpack能直接处理的资源
这里就用到了loader-加载器,如:css,图片都有其对应的loader加载器
在webpack的世界里,一切皆为模块
加载器的作用是将类似css这种webpack不能处理的文件转化为其可以处理的模块
这篇介绍Webpack使用css-loader打包css文件
二,创建css文件并打包
在上一篇的Demo基础上创建css文件-新建src/css/test.css
test.css-简单的为body添加背景色: body{ background-color: blue; }添加css文件后的目录结构:
在入口文件entry.js中引入css: body{ background-color: blue; }添加css文件后,运行webpack命令,打包输出文件: Brave:webpack Brave$ webpack Hash: df5386d5152e03e3e4db Version: webpack 3.8.1 Time: 91ms Asset Size Chunks Chunk Names bundle.js 4.49 kB 0 [emitted] main [0] ./src/js/entry.js 487 bytes {0} [built] [1] ./src/js/second.js 141 bytes {0} [built] [2] ./src/data/testdata.json 44 bytes {0} [built] [3] ./src/css/test.css 170 bytes {0} [built] [failed] [1 error] ERROR in ./src/css/test.css Module parse failed: Unexpected token (1:4) You may need an appropriate loader to handle this file type. | body{ | background-color: blue; | } @ ./src/js/entry.js 10:0-25 打包输出异常,查看log发现webpack在处理css文件时出错了 原因是webpack只能处理js和json文件,不能直接加载css文件 需要使用css对应的loader来对其进行处理 三,使用Loader处理css参考webpack的官方文档: https://webpack.docschina.org/loaders/css-loader/ 官方文档给出里webpack加载css文件的解决方法,使用css对应的loader 使用css-loader和style-loader两个加载器来处理css文件 css-loader:只负责加载css模块,不会将加载的css样式应用到html style-loader:负责将css-loader加载到的css样式动态的添加到html-head-style标签中安装css-loader和style-loader npm install css-loader style-loader --save-dev安装完成后,查看package.json: { "name": "webpack_test", "version": "1.0.0", "devDependencies": { "css-loader": "^1.0.0", "style-loader": "^0.21.0", "webpack": "3.8.1" } }在webpack.config.js中添加处理css文件的loader配置: const path = require('path'); module.exports = { entry: './src/js/entry.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist/js/') }, // 模块对象 module: { // 规则 rules: [ { // 正则匹配所有以.css结尾的文件 test: /\.css$/, // 使用css-loader和style-loader依次对css文件进行处理 // 按照数组中从后往前的顺序 use: [ 'style-loader', 'css-loader' ] } ] } };执行webpack命令,重新打包输出文件: Brave:webpack Brave$ webpack Hash: 3d1e0c919800dfe1d2b5 Version: webpack 3.8.1 Time: 359ms Asset Size Chunks Chunk Names bundle.js 21.1 kB 0 [emitted] main [0] ./src/js/entry.js 487 bytes {0} [built] [1] ./src/js/second.js 141 bytes {0} [built] [2] ./src/data/testdata.json 44 bytes {0} [built] [3] ./src/css/test.css 1.08 kB {0} [built] [4] ./node_modules/css-loader!./src/css/test.css 199 bytes {0} [built] + 3 hidden modules 添加了css相关loader后,不再报错 最后一行显示+ 3 hidden modules,有三个模块被隐藏 可以执行webpack --display-modules使其显示出来执行webpack –display-modules: Brave:webpack Brave$ webpack --display-modules Hash: 3d1e0c919800dfe1d2b5 Version: webpack 3.8.1 Time: 353ms Asset Size Chunks Chunk Names bundle.js 21.1 kB 0 [emitted] main [0] ./src/js/entry.js 487 bytes {0} [built] [1] ./src/js/second.js 141 bytes {0} [built] [2] ./src/data/testdata.json 44 bytes {0} [built] [3] ./src/css/test.css 1.08 kB {0} [built] [4] ./node_modules/css-loader!./src/css/test.css 199 bytes {0} [built] [5] ./node_modules/css-loader/lib/css-base.js 2.26 kB {0} [built] [6] ./node_modules/style-loader/lib/addStyles.js 10 kB {0} [built] [7] ./node_modules/style-loader/lib/urls.js 3.01 kB {0} [built]可以看到 5-7 原本隐藏的三个模块的输出信息显示出来了 访问index.html:
查看页面元素:
|
【本文地址】
今日新闻 |
推荐新闻 |