1、打包图片

     //     {
// test: /\.(png|jpe?g|gif)$/i,
// use: [{
// loader: 'file-loader',
// options: {
// name: '[name].[ext]',
// },
// }, ],
// },

打包文件用的。

占位符的这种思维可以作为我们软件架构的一部分。

2、打包图片的另一种方式

 {
test: /\.(png|jpe?g|gif)$/i,
use: [{
loader: 'url-loader',
options: {
name: '[name].[ext]',
limit: 2048
},
}, ],
}

limit是打包文件的大小的界限。

3、打包css文件的方式。

{
test: /\.css$/i,
use: ['style-loader', 'css-loader'],
}

4、打包sass,scss

首先在webpack.config.js

{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
'css-loader',
// Compiles Sass to CSS
'sass-loader',
//用于形成浏览器的前缀
'postcss-loader'
],
},

然后在跟目录下新建文件。

postcss.config.js

然后输入下面的内容

module.exports = {
plugins: [require("autoprefixer")]
}

其中postcss和autoprefixer的是兼容性的考虑。

5、对于两个文件有引用的情况。

{
test: /\.s[ac]ss$/i,
use: [
// Creates `style` nodes from JS strings
'style-loader',
// Translates CSS into CommonJS
{
loader: "css-loader",
options: {
importLoaders: 2, // 0 => no loaders (default); 1 => postcss-loader; 2 => postcss-loader, sass-loader
},
},
// Compiles Sass to CSS
'sass-loader',
//用于形成浏览器的前缀
'postcss-loader'
],
},

6、对于字体文件的引用。

{
test: /\.(eot||ttf|woff|svg)$/i,
use: [{
loader: 'file-loader'
}, ],
}
												

webpack打包教程(一)常用loader详解的更多相关文章

  1. gitbook 入门教程之常用命令详解

    不论是 gitbook-cli 命令行还是 gitbook editor 编辑器都离不开 gitbook 命令的操作使用,所以再次了解下常用命令. 注意 gitbook-cli 是 gitbook 的 ...

  2. Webpack探索【3】--- loader详解

    本文主要说明Webpack的loader相关内容.

  3. Cordova 打包 Android release app 过程详解

    Cordova 打包 Android release app 过程详解 时间 -- :: SegmentFault 原文 https://segmentfault.com/a/119000000517 ...

  4. Android Studio系列教程五--Gradle命令详解与导入第三方包

    Android Studio系列教程五--Gradle命令详解与导入第三方包 2015 年 01 月 05 日 DevTools 本文为个人原创,欢迎转载,但请务必在明显位置注明出处!http://s ...

  5. Kubernetes K8S之通过yaml文件创建Pod与Pod常用字段详解

    YAML语法规范:在kubernetes k8s中如何通过yaml文件创建pod,以及pod常用字段详解 YAML 语法规范 K8S 里所有的资源或者配置都可以用 yaml 或 Json 定义.YAM ...

  6. Tomcat记录-tomcat常用配置详解和优化方法(转载)

    常用配置详解 1 目录结构 /bin:脚本文件目录. /common/lib:存放所有web项目都可以访问的公共jar包(使用Common类加载器加载). /conf:存放配置文件,最重要的是serv ...

  7. tomcat常用配置详解和优化方法

    tomcat常用配置详解和优化方法 参考: http://blog.csdn.net/zj52hm/article/details/51980194 http://blog.csdn.net/wuli ...

  8. logback 常用配置详解<appender>

    logback 常用配置详解 <appender> <appender>: <appender>是<configuration>的子节点,是负责写日志的 ...

  9. 【转】logback logback.xml常用配置详解(三) <filter>

    原创文章,转载请指明出处:http://aub.iteye.com/blog/1110008, 尊重他人即尊重自己 详细整理了logback常用配置, 不是官网手册的翻译版,而是使用总结,旨在更快更透 ...

随机推荐

  1. 安装torch

    一.实验环境 1.Windows7x64_SP1 2.anaconda3.7 + python3.7(anaconda集成,不需单独安装) 二.问题描述 1.使用如下命令进行安装: pip3 inst ...

  2. 使用Vuejs 开发chrome 插件的注意事项

    chrome 插件的开发其实并不难,web开发者可以使用 html, css, javascript 轻松的开发实用的 chrome 插件. 一个好的 chrome 插件可以提高我们的开发效率,甚至方 ...

  3. jackson json转实体对象 com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException

    Jackson反序列化错误:com.fasterxml.jackson.databind.exc.UnrecognizedPropertyException: Unrecognized field的解 ...

  4. hive creating temporary folder on: Error encountered near token 'TOK_TMP_FILE'

    执行create tmp.tablename  as select .....语句的时候报以下错误: SemanticException 0:0 creating temporary folder o ...

  5. go-百度贴吧-纵向爬取

    百度贴吧纵向爬取 上一个是横向爬取的,这个纵向爬取,具体怎么做的看代码 package main import ( "fmt" "io" "net/h ...

  6. 16.Linux-LCD驱动(详解)【转】

    转自:https://www.cnblogs.com/lifexy/p/7604011.html 在上一节LCD层次分析中,得出写个LCD驱动入口函数,需要以下4步: 1) 分配一个fb_info结构 ...

  7. fake_useragent.json

    { "browsers": { "chrome": [ "Mozilla/5.0 (Windows NT 6.1) AppleWebKit/537.3 ...

  8. Centos 7 自动安装系统-pxe

    一.简介 PXE(Pre-boot Execution Environment,预启动执行环境)是由Intel公司开发的最新技术,工作于Client/Server的网络模式,支持工作站通过网络从远端服 ...

  9. (day50)二、文件配置、ORM

    目录 一.静态文件 (一)配置html文件 (二)什么是静态文件 (三)静态文件配置 (四)静态文件动态绑定 (五)form表单POST请求配置 二.request方法初识 (一)request.me ...

  10. Deformable Convolutional Networks

    1 空洞卷积 1.1 理解空洞卷积 在图像分割领域,图像输入到CNN(典型的网络比如FCN)中,FCN先像传统的CNN那样对图像做卷积再pooling,降低图像尺寸的同时增大感受野,但是由于图像分割预 ...