webpack2.0加载postcssloader以及autoprefixer实现自动根据兼容性的需求给css加私有前缀的功能,给开发带来便利,

下面是我的配置信息,亲测有效:

1.webpack.config.js的配置:

module: {
  rules: [
    {
      test: /\.vue$/,
      loader: 'vue-loader',
      options: {
      // vue-loader options go here
      postcss: [require('autoprefixer')({ browsers: ['last 10 Chrome versions', 'last 5 Firefox versions', 'Safari >= 6', 'ie > 8'] })]
      }
    },
    {
      test: /\.js$/,
      loader: 'babel-loader',
      exclude: /node_modules/
    },
    {
      test: /\.css$/,
      loaders:'style-loader!css-loader'
    },
    {
      test: /\.less$/,
      loader: 'style-loader!css-loader!postcss-loader!less-loader',
      exclude: /node_modules/
    },
    {
      test: /\.(eot|svg|ttf|woff|woff2)$/,
      loader: 'file'
    },
    {
      test: /\.(png|jpg|gif|svg)$/,
      loader: 'file-loader',
      options: {
        name: '[name].[ext]?[hash]'
      }
    }
  ]
}

其他配置略。。。

2.package.json的依赖:

npm install autoprefixer postcss-loader --save--dev

或 npm i autoprefixer postcss-loader -D

实现的效果如下:

编译完成:

给一个我的demo的链接:https://github.com/BugsMaster/test.git

webpack加载postcss,以及autoprefixer的loader的更多相关文章

  1. webpack进阶构建项目(一):1.理解webpack加载器

    1.理解webpack加载器 webpack的设计理念,所有资源都是“模块”,webpack内部实现了一套资源加载机制,这与Requirejs.Sea.js.Browserify等实现有所不同. We ...

  2. webpack加载器(Loaders)

    加载器(Loaders) loader 是对应用程序中资源文件进行转换.它们是(运行在 Node.js 中的)函数,可以将资源文件作为参数的来源,然后返回新的资源文件. 示例 例如,你可以使用 loa ...

  3. webpack加载css文件及其配置

    webpack加载css文件及其配置 当我们写了几个css文件之后如果想要引用到html中去的话我们最开始的方式就是通过link标签将css文件导入进去,但是如果我们的css文件有很多的话,一个个的导 ...

  4. webpack加载多级依赖时css、html文件不能正确resolve的问题

    在使用webpack+avalon以及avalon的mmRouter做SPA的时候,碰到一个困扰数周的问题:webpack加载多级依赖时出现了css文件和模板(html)文件不能正确resolve.原 ...

  5. Vue-cli / webpack 加载静态js文件的方法

    一.html-webpack-plugin 编译 1.只需要在入口处定义一个chunks,如我们定义一个fuck模块 entry: { app: './src/main.js', fuck: ['./ ...

  6. 让 webpack 加载 Source Map

    在浏览器中运行的 JavaScript 代码都是编译器输出的代码,这些代码的可读性很差.如果在开发过程中遇到一个不知道原因的 Bug,则你可能需要通过断点调试去找出问题. 在编译器输出的代码上进行断点 ...

  7. 使用webpack loader加载器

    了解webpack请移步webpack初识! 什么是loader loaders 用于转换应用程序的资源文件,他们是运行在nodejs下的函数 使用参数来获取一个资源的来源并且返回一个新的来源(资源的 ...

  8. EasyDSS高性能流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载 - 副本

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

  9. EasyDSS高性能RTMP、HLS(m3u8)、HTTP-FLV、RTSP流媒体服务器前端重构(五)- webpack + vue-router 开发单页面前端实现按需加载

    为了让页面更快完成加载, 第一时间呈现给客户端, 也为了帮助客户端节省流量资源, 我们可以开启 vue-router 提供的按需加载功能, 让客户端打开页面时, 只自动加载必要的资源文件, 当客户端操 ...

随机推荐

  1. C# 批量删除Word超链接

    对于Word文档中包含较多的超链接,如果一个个来删除很花费时间和精力,本篇文章将提供一种可用于批量删除Word中的超链接的方法.这里的超链接可以是页眉页脚处的超链接.正文中的超链接.表格中的超链接.文 ...

  2. 经典面试题:从 URL 输入到页面展现到底发生什么?

    前言 打开浏览器从输入网址到网页呈现在大家面前,背后到底发生了什么?经历怎么样的一个过程?先给大家来张总体流程图,具体步骤请看下文分解! 本文首发地址为GitHub 博客,写文章不易,请多多支持与关注 ...

  3. embed 引入网上视频

    <p>embed引入网上视频</p> <embed src='http://player.youku.com/player.php/sid/XMjgxODkyMTIxNg ...

  4. asp.net core webapi/website+Azure DevOps+GitHub+Docker

    asp.net core webapi/website+Azure DevOps+GitHub+Docker 新春开篇作,主要写一下关于asp.net core web/api 2.2 项目借助dev ...

  5. 扩展1000!(n!)的尾数零的个数

    #include <stdio.h> #include <malloc.h> //计算1000!尾数零的个数 //扩展n!的尾数零的个数 //2^a * 5^b //obvio ...

  6. Keepalived脑裂

    问题描述:开启防火墙后,Keepalived出现脑裂. 背景架构:两台centos7通过Keepalived实现高可用 问题具体表现形式:两台主机通过ip addr (ip  a)查看,发现两台主机都 ...

  7. 软件设计之Deep Module(深模块)

    类是不是越小越好?最近在读John Ousterhout的<A Philosophy of Software Design>,感到作者文笔流畅,书中内容具有启发性.这里摘要一部分内容,以供 ...

  8. scheme实现最基本的自然数下的运算

    版权申明:本文为博主窗户(Colin Cai)原创,欢迎转帖.如要转贴,必须注明原文网址 http://www.cnblogs.com/Colin-Cai/p/9123363.html 作者:窗户 Q ...

  9. 英语口语练习系列-C01-好棒

    古诗 来自百度 It's cool. It is neat. It's righteous! It's righteous! 酷毙了! righteous是 cool 的高级了 如果一件事让你无法用 ...

  10. Django的认证系统

    Django自带的用户认证 我们在开发一个网站的时候,无可避免的需要设计实现网站的用户系统.此时我们需要实现包括用户注册.用户登录.用户认证.注销.修改密码等功能,这还真是个麻烦的事情呢. Djang ...