webpack--第三方loader
Posted xy-ouyang
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack--第三方loader相关的知识，希望对你有一定的参考价值。
1、配置处理css样式表的第三方loader
webpack默认只能打包处理js类型的文件，无法处理非js类型的文件；要想处理*.css文件，需要手动安装一下合适的第三方loader加载器：
npm i style-loader css-loader -D
修改webpack.config.js
var path = require(‘path‘); // 通过node的模块操作，向外暴露一个配置对象 module.exports = entry: path.join(__dirname, ‘./src/main.js‘), // 入口，表示要使用webpack打包哪个文件 output: // 出口 path: path.join(__dirname, ‘./dist‘), filename: ‘bundle.js‘ , module: // 用于配置所有第三方模块加载器 rules: [ // 所有第三方模块的匹配规则 test:/\.css$/, use: [‘style-loader‘,‘css-loader‘] ] ;
然后，可以在main.js导入.css文件，main.js内容：
// 这是项目的入口js文件 // 导入jquery //这是ES6中导入模块的语法 import $ from ‘jquery‘; import ‘./css/common.css‘; $(function() $(‘li:odd‘).css(‘backgroundColor‘,‘yellow‘); $(‘li:even‘).css(‘backgroundColor‘,‘#eee‘); );
common.css内容：
.blue background-color: blue;
然后，执行webpack命令，重新生成bundle.js。
2、webpack中url-loader的使用：处理css文件中引入的url地址
安装第三方loader加载器：
npm i url-loader file-loader -D
修改webpack.config.js
var path = require(‘path‘); // 通过node的模块操作，向外暴露一个配置对象 module.exports = entry: path.join(__dirname, ‘./src/main.js‘), // 入口，表示要使用webpack打包哪个文件 output: // 出口 path: path.join(__dirname, ‘./dist‘), filename: ‘bundle.js‘ , module: //用于配置所有第三方模块加载器 rules: [ //所有第三方模块的匹配规则 test:/\.css$/, use: [‘style-loader‘,‘css-loader‘] , test:/\.(jpg|png|gif|bmp|jpeg)$/, use: [‘url-loader‘] ] ;
common.css内容：
.blue
background-color: blue;
div.img
width: 200px;
height: 200px;
background: url(‘../images/a.jpg‘);
background-size: cover;
index.html
<!DOCTYPE html> <html> <head> <title>标题</title> <meta charset="utf-8"> <script type="text/javascript" src="../dist/bundle.js"></script> </head> <body> <h3 class="blue">h3标签内的文本</h3> <ul> <li>这是一个li标签</li> <li>这是一个li标签</li> <li>这是一个li标签</li> <li>这是一个li标签</li> <li>这是一个li标签</li> </ul> <div class="img"></div> </body> </html>
以上是关于webpack--第三方loader的主要内容，如果未能解决你的问题，请参考以下文章