Webpack的加载器
一、什么是加载器(loaders)
loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载less文件、sass文件、es的js文件等
二、loaders 特性
loaders可以串联,他们应用于管道资源,最后的loader将返回javascript,其它的可返回任意格式(传递给下一个loader)
loaders 可以同步也可以异步
loaders在nodejs下运行并且可以做一切可能的事
loader接受参数,可用于配置里
loaders可以绑定到extension/RegExps 配置
loaders 可以通过npm发布和安装
正常的模块儿可以到处一个loader除了
loaders 可以访问配置
插件可以给loaders更多的特性
loaders可以释放任意额外的文件
三、loaders的执行顺序
loaders的执行顺序分为三部分:preLoaders - loaders - postLoaders,针对每一个阶段可以这对不同的操作,preLoaders可以进行代码的时候检查,只有检测通过才可以进行loaders。loaders阶段主要进行css、js、 images等文件的处理。postLoaders阶段没有用到过
四、css-loader和style-loader添加CSS样式
现在来添加一些样式,webpack使用loader的方式来处理各种各样的资源,比如说样式文件,我们需要两种loader,css-loader 和 style-loader,css-loader会遍历css文件,找到所有的url(...)并且处理。style-loader会把所有的样式插入到你页面的一个style tag中。
安装我们的loader
npm install css-loader style-loader --save-dev
配置loader,在webpack.config.js中
var webpack = require('webpack'); var WebpackDevServer = require("webpack-dev-server"); var path = require('path'); var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录 var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录 var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录 var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录 var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = {//项目的文件夹 可以直接用文件夹名称 默认会找index.js ,也可以确定是哪个文件名字 entry: {app: ['./src/js/index.js'],vendors: ['jquery', 'moment'] //需要打包的第三方插件 },//输出的文件名,合并以后的js会命名为bundle.js output: {path: path.join(__dirname, "dist/"),publicPath: "http://localhost:8088/dist/",filename: "bundle_[name].js"},module: {loaders: [// 把之前的style loader改为 {test: /\.css$/,loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),exclude: /node_modules/}]} } ;
看loaders的书写方式,test里面包含一个正则,包含需要匹配的文件,loaders是一个数组,包含要处理这些程序的loaders,这里我们用了css和style,注意loaders的处理顺序是从右到左的,这里就是先运行css-loader然后是style-loader.
我们在webpackDemo项目里面创建一个css文件夹,然后 创建 index.css文件,内容如下:
body{font-size: 16px; }
然后在index.js引用 css文件
var login=require('./login'); var data = require('data'); require('./../css/index.css');$("#welcome").html(data);
这样就能实现样式引用了。还可以结合ExtractTextPlugin进行样式提取。
var webpack = require('webpack');
var WebpackDevServer = require("webpack-dev-server");
var path = require('path');
var CURRENT_PATH = path.resolve(__dirname);
// 获取到当前目录
var ROOT_PATH = path.join(__dirname, '../');
// 项目根目录
var MODULES_PATH = path.join(ROOT_PATH, './node_modules');
// node包目录
var BUILD_PATH = path.join(ROOT_PATH, './dist');
// 最后输出放置公共资源的目录
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require("extract-text-webpack-plugin");
var CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {//项目的文件夹 可以直接用文件夹名称 默认会找index.js ,也可以确定是哪个文件名字 entry: {app: ['./src/js/index.js'],vendors: ['jquery', 'moment']//需要打包的第三方插件 },//输出的文件名,合并以后的js会命名为bundle.js output: {path: path.join(__dirname, "dist/"),publicPath: "http://localhost:8088/dist/",filename: "bundle_[name].js"},module: {loaders: [// 把之前的style&css&less loader改为 {test: /\.css$/,loader: ExtractTextPlugin.extract('style-loader', 'css-loader'),exclude: /node_modules/}, {test: /\.less$/,loader: ExtractTextPlugin.extract('style', 'css!less'),exclude: /node_modules/},]},plugins: [// 分离css new ExtractTextPlugin('[name].bundle.css', {allChunks: true})],externals: {// require('data') is external and available// on the global var data 'data': 'data',devtool: 'source-map'}
};
五、autoprefixer-loader和less-loader处理less文件
项目中如果用到less,就需要对less进行转换,通过less-loader就能进行转换。autoprefixer-loader是针对css3的前缀进行自动 填充,例如:border-radius,autoprefixer-loader通过他就能把各个浏览器的前缀添加上去。
安装
npm install less autoprefixer-loader less-loader postcss-loader --save-dev
添加loader
var webpack = require('webpack'); var WebpackDevServer = require("webpack-dev-server"); var path = require('path'); var CURRENT_PATH = path.resolve(__dirname); // 获取到当前目录 var ROOT_PATH = path.join(__dirname, '../'); // 项目根目录 var MODULES_PATH = path.join(ROOT_PATH, './node_modules'); // node包目录 var BUILD_PATH = path.join(ROOT_PATH, './dist'); // 最后输出放置公共资源的目录 var HtmlWebpackPlugin = require('html-webpack-plugin'); var ExtractTextPlugin = require("extract-text-webpack-plugin"); var CopyWebpackPlugin = require('copy-webpack-plugin'); module.exports = {//项目的文件夹 可以直接用文件夹名称 默认会找index.js ,也可以确定是哪个文件名字 entry: {app: ['./src/js/index.js'],vendors: ['jquery', 'moment']//需要打包的第三方插件 },//输出的文件名,合并以后的js会命名为bundle.js output: {path: path.join(__dirname, "dist/"),publicPath: "http://localhost:8088/dist/",filename: "bundle_[name].js"},module: {loaders: [// 把之前的style&css&less loader改为 {test: /\.css$/,loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'postcss-loader'),exclude: /node_modules/}, {test: /\.less$/,exclude: /node_modules/,loader: ExtractTextPlugin.extract('style', 'css!autoprefixer?{browsers: ["last 2 version", "IE 8", "Android 4.0", "iOS 6"]}!less?strictMath&noIeCompat!postcss')}]},postcss: function() {return [require('postcss-fixes')({ preset: 'recommended' })]},plugins: [// 分离css new ExtractTextPlugin('[name].bundle.css', {allChunks: false})], };
在webpackDemo 添加login.less文件
.maker-config {width: 100px;background-color: red;border-radius: 50px;margin-left: -48px;float: right; a{font-size: 16px;display: flex } }
执行webpack命令生成的css文件为:
body{font-size:16px} .maker-config{ width:100px; background-color:red; border-radius:50px; margin-left:-48px; float:right} .maker-config a{ font-size:16px; display:-webkit-box; display:-ms-flexbox; display:flex}/*# sourceMappingURL=app.bundle.css.map*/
六、url-loader图片处理
这个和其他一样,也许你也已经会玩了。安装loader,处理文件。诸如图片,字体等等,不过有个神奇的地方它可以根据你的需求将一些图片自动转成base64编码的,为你减轻很多的网络请求。
安装url-loader
npm install url-loader --save-dev
配置config文件
{test: /\.(png|jpg)$/,loader: 'url?limit=40000'}
注意后面那个limit的参数,当你图片大小小于这个限制的时候,会自动启用base64编码图片。
我们修改一下login.less文件
.maker-config {background-color: red;border-radius: 50px;height:200px;background: url('../images/white.png'); a{font-size: 16px;display: flex } }
执行webpack执行命令,查看编译之后的css文件,可以看到 图片被转换为base64编码
body{font-size:16px}.maker-config{width:100px;background-color:red;border-radius:50px;height:200px;margin-left:-48px;float:right;background:url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAANcAAADXBAMAAAB7U9mGAAAAGFBMVEXw8PDy8vL09PT29vbt7e3r6+v4+Pj7+/v9bAgbAAAOsUlEQVR42rxaS5cyNRC9VQm4rUqacVuVbsZtukHX6QZ1C+PoGsbHWv3/C8/xddTxNSLfD4ADSe6j7i0AGNe+0AU2gA5Aqh1maZ657w9cNJJPBUHCZxTYEwslk7XjwVTWulgWrnaESqXMaUZ39pF0Z8RzKGXNzBOmXDFsB)}.maker-config a{font-size:16px;display:-webkit-box;display:-ms-flexbox;display:flex}/*# sourceMappingURL=app.bundle.css.map*/
转载于:https://www.cnblogs.com/liuchuanfeng/p/6802666.html
Webpack的加载器相关推荐
- webpack 中的加载器简介||webpack 中加载器的基本使用——1. 打包处理 css 文件 2. 打包处理 less 文件 3.打包处理 scss 文件
webpack 中的加载器 1. 通过 loader 打包非 js 模块 在实际开发过程中,webpack 默认只能打包处理以 .js 后缀名结尾的模块,其他非 .js 后缀名结尾的模块, webpa ...
- webpack使用加载器来加载CSS样式
前言: 对于webpack来说,每个文件都是一个模块,比如css.js.html.jpg等. 对于不同的模块,就得需要不同的加载器(Loaders)来处理,所以加载器是webpack最重要的功能. 安 ...
- 一文学会Webpack实用功能|加载器篇
Webpack 资源模块加载 通过探索我们知道可以把css文件作为打包的入口,不过webpack的打包入口一般还是JavaScript, 因为他的打包入口从某种程度来说可以算是我们应用的运行入口. 而 ...
- webpack配置vue组件加载器
前言 App.vue单文件组件代码 <template><div><h1>App根组件</h1></div> </template&g ...
- webpack中loader加载器(打包非js模块)
通过loader打包非js模块 我这儿用VScode为编辑器 在实际开发过程中,webpack默认只能打包处理以.js后缀名结尾的模块,其他非. js后缀名结 尾的模块,webpack 默认处理不了, ...
- Vue 单文件组件||Vue 单文件组件的基本用法||webpack 中配置 vue 组件的加载器|| 在 webpack 项目中使用 vue
Vue 单文件组件 传统组件的问题和解决方案 1. 问题 1. 全局定义的组件必须保证组件的名称不重复 2. 字符串模板缺乏语法高亮,在 HTML 有多行的时候,需要用到丑陋的 \ 3. 不支持 CS ...
- js css加载器,webpack的CSS加载器的使用
什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webp ...
- Webpack基础之加载器
加载器(Loaders): loader 是对应用程序中资源文件进行转换.它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件 示例: 例如,你可以使用 lo ...
- 需要了解的常用Webpack插件配置-loader加载器
我们都知道通过安装和配置第三方插件,可以使我们的webpack拓展更多的功能,虽然之后开发项目不需要我们自己去进行这些繁琐的配置,但是我们需要知道这些,在必要时我们可以去做出修改 比如我们在初识web ...
最新文章
- 腾讯员工中66%是研发,用C++最多,去年新写12.9亿行代码
- 进阶学习(3.5) Singleton Pattern 单例模式
- ( 1 )Linux 常用命令
- 阿里云容器服务多项重磅发布:高效智能、安全无界的新一代平台
- JavaScript 更新对象属性
- J2SE理解之一:声明和访问控制
- 一般编译器错误_[翻译]MLIR:摩尔定律终结的编译器基础结构
- 一种可以解决python读取文件中文出乱码的方法
- c md5加密 和java不一样_C#的MD5加密为什么和JAVA的加密出来的结果不一样?
- csv在python中的意思,在python中解析csv
- Mac版 QQ防撤回插件
- 保研经历总结-清华大学计算机系
- 一文搞懂JVM内存结构
- badboy提示当前页面的脚本发生错误
- <C++>类的对象内存空间分配一点就通,this指针一学就会
- vue关闭eslint语法检查
- ios点击推送闪退_iOS 13.4 Beta 4 发布,闪退问题修复
- ipad打开网页无法播放视频
- 3、防御迷阵(二分+bfs)
- shell 打印九九乘法表