wenpack分离css,webpack 配置分离css插件

以css配置示例,less与sass同理

1. 使用旧版的ExtractTextPlugin插件

安装

npm install extract-text-webpack-plugin@next --save-dev

在webpack.config.js中配置

const extractTextPlugin=require('extract-text-webpack-plugin')

module.exports={

//...code

module:{

rules:[{

test:/\.css$/,

use:extractTextPlugin.extract({

fallback:"style-loader",

use:['css-loader'],

publicPath:"../"

})

}]

},

plugins:[

new extractTextPlugin("./css/[name].css")//输出路径

]

}

如果还使用了根据css自动加前缀loader

const extractTextPlugin=require('extract-text-webpack-plugin')

module.exports={

//...code

module:{

rules:[{

test:/\.css$/,

use:extractTextPlugin.extract({

fallback: "style-loader",

use: ['css-loader', {

loader: 'postcss-loader',

options: {

plugins: [require('autoprefixer')]

}

}]

publicPath: '../'

})

}]

},

plugins:[

new extractTextPlugin("./css/[name].css")//输出路径

]

}

使用方法

配置完成后运行webpack打包即可

2.使用新版mini-css-extract-plugin 插件

安装

npm install mini-css-extract-plugin --save-dev

在webpack.config.js中配置

const miniCssPlugin=require('mini-css-extract-plugin');

module.exports={

module:{

rules:[

{

test:/\.css$/,

use: [{

loader: miniCssPlugin.loader,

options: {

publicPath: '../'

}

}, 'css-loader']

}

]

},

plugins:[

new miniCssPlugin({

filename:'./css/[name].css'

})

]

}

关于webpack 以及 webpack配置和常用插件的学习记录 (1)

主要概念: Entry :   webpack的入口,构建的第一步从entry开始. Output :   输出,经过webpack处理后的得到最终想要的代码. Loader :   模块转换工具,把 ...

webpack配置：css文件打包、JS压缩打包和HTML文件发布

一.CSS文件打包 1.在src下新建css文件,在css文件下新建index.css文件,输入以下代码 body{ color:red; font-size:20px; } 2.css建立好后,需要 ...

关于webpack 以及 webpack配置和常用插件的学习记录 (2) ------ devServer

DevServer: devserver会启动一个http服务器用于服务网页请求,接收webpack发出的文件变化的信号.通过websocket协议自动刷新网页,实现实时预览. 安装: npm i w ...

webpack代码分离CommonsChunkPlugin插件的使用(防止重复)

1.webpack.config.js中添加: const path = require('path'); + const webpack = require('webpack'); const HT ...

webpack配置：less/sass文件打包和分离、自动处理css前缀、消除未使用的css及完整的webpack.config.js文件

一.less文件打包和分离 1.要使用less,首先使用npm安装less服务:还需要安装Less-loader用来打包使用. npm install less --save-dev npm inst ...

webpack配置：图片处理、css分离和路径问题

一.CSS中的图片处理: 1.首先在网上随便找一张图片,在src下新建images文件夹,将图片放在文件夹内 2.在index.html中写入代码:

webpack快速入门——CSS分离与图片路径处理

1.在终端安装extract-text-webpack-plugin 2.引入插件 const extractTextPlugin = require("extract-text-webpa ...

webpack快速入门——CSS进阶，Less文件的打包和分离

1.要使用less,首先使用npm安装less服务 cnpm install less --save-dev 还需要安装Less-loader用来打包使用. cnpm install less-loa ...

webpack快速入门——CSS进阶：SASS文件的打包和分离

1.安裝:因为sass-loader依赖于node-sass,所以需要先安装node-sass cnpm install node-sass --save-dev cnpm install sass- ...

随机推荐

Android Permission 访问权限大全(转)

程序执行需要读取到安全敏感项必需在androidmanifest.xml中声明相关权限请求, 完整列表如下: android.permission.ACCESS_CHECKIN_PROPERTIES允 ...

iOS学习26之UINavigationController

1. UINavigationController 1> 概述 UINavigationController : 导航控制器, 是 iOS 中最常用的多视图控制器之一, 用它来管理多个视图控制器 ...

关于视觉里程计以及VI融合的相关研究(长期更新)

1. svo 源码:https://github.com/uzh-rpg/rpg_svo 国内对齐文章源码的研究: (1)冯斌: 对其代码重写 https://github.com/yueying/O ...

IceMx.Mvc 我的js MVC 框架七、完善植物大战僵尸(增加阳光的消费和获得)

话不多说,先上图 这次增加了阳光的消费和获得,增加了阳光的点击动画 重新排布了布局 有兴趣的话就研究下吧. 上一篇有朋友说让我把项目放到github上面维护,本人没用过这个,肯请朋友们帮小弟科普一下放 ...

Oracle 去掉重复字符串

create or replace function remove_same_string(oldStr varchar2, sign varchar2) return varchar2 is /** ...

Eclipse 启动报错 An internal error occurred during: "Initializing Java Tooling"

如图所示,我的Eclispe版本是Oxygen,启动的时候turnaround弹出这种错误. 多种情况会导致这种报错.通过[重置窗口布局],可解决大部分情况: 解决办法:点击菜单导航栏的Window ...

ASP.NET -- WebForm -- HttpRequest类的方法和属性

ASP.NET -- WebForm --  HttpRequest类的方法和属性 1. HttpRequest类的方法(1) BinaryRead: 执行对当前输入流进行指定字节数的二进制读取. ( ...

hive web界面管理

老版本使用 访问:9999/hwi 1.首先下载对应版本的src文件,本机使用apache-hive-1.2.2-src.tar.gz 2.解压缩 ...

使用JQuery 合并两个 json 对象

一,保存object1和2合并后产生新对象,若2中有与1相同的key,默认2将会覆盖1的值 var object = $.extend({}, object1, object2); 二,将2的值合并到 ...

yii 定义场景

定义场景可以限制对字段的增删改查操作