webpack react 单独打包 CSS

webpack require css的方法,默认会把css 打入到js文件中,加载顺序有问题,如果需要打出独立的css文件

操作步骤:

step1:

安装 webpack plugin 插件

npm install extract-text-webpack-plugin --save

step2:

修改 webpack.config.js 配置

引用plugin

var ExtractTextPlugin = require("extract-text-webpack-plugin");

config的module 中:

{ test: /\.less$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader","less-loader") }, 

最后plugins添加

plugins: [ new ExtractTextPlugin("./css/[name][hash:8].css") ] 

问题

Q: Module build failed: ReferenceError: window is not defined.

A: 修改loader

错误示范: loader: ExtractTextPlugin.extract("style-loader!css-loader!less-loader")

正确示范: loader: ExtractTextPlugin.extract("style-loader", "css-loader","less-loader")

参考文章:

1. https://webpack.github.io/docs/stylesheets.html

2. http://stackoverflow.com/questions/28223040/window-not-defined-error-when-using-extract-text-webpack-plugin-react

webpack react 单独打包 CSS的更多相关文章

  1. webpack分离css单独打包

    这篇文章过期了,webpack4.x已经不这么用了,最新的可以看这个地址webpack实战场景系列 原文地址:http://www.izhongxia.com/posts/44724.html CHA ...

  2. webpack打包时排除其中一个css、js文件,或单独打包一个css、js文件

    在项目中经常会需要将一些接口的配合文件或者某些样式文件,分离出来单独打包,便于后期改动,这里我以css文件为例,介绍实现两种方法: 项目目录: 如上图所示,现在我需要将项目中的scBtn.css文件单 ...

  3. webpack 多页面支持 & 公共组件单独打包

    webpack - 多页面/入口支持 & 公共组件单独打包 webpack系列目录 webpack 系列 一:模块系统的演进 webpack 系列 二:webpack 介绍&安装 we ...

  4. 走近webpack(2)--css打包及压缩js

    前面的文章介绍了webpack的devServer以及多入口多出口文件的配置,咱们继续往下学. 在开始学习接下来的知识之前,我们先回顾一下,前文提到了webpack的简单配置方法,但是只详细说了下入口 ...

  5. webpack 多页面|入口支持和公共组件单独打包--转载

    转载自:http://www.jb51.net/article/117490.htm 本篇主要介绍:如何自动构建入口文件,并生成对应的output:公共js库如何单独打包. 多入口文件,自动扫描入口. ...

  6. webpack 单独打包指定JS文件

    背景 最近接到一个需求,因为不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件. CommonsChun ...

  7. webpack入门之打包html,css,js,img(一)

    webpack到底是什么,网上一大堆介绍的东西,越看越不知道说的什么,所以今天打算自己来记录一下这段时间学习webpack的成果, webpack就是打包文件用的,html,css,js,img,为什 ...

  8. webpack 单独打包指定JS文件(CopyWebpackPlugin)

    背景: 不确定打出的前端包所访问的后端IP,需要对项目中IP配置文件单独拿出来,方便运维部署的时候对IP做修改.因此,需要用webpack单独打包指定文件.npm install --save-dev ...

  9. webpack打包css

    1.第一种方式 1.安装css-loader和style-loader $ cnpm install css-loader style-loader --save-dev 2.引用的时候使用css-l ...

随机推荐

  1. UIKit 框架之UIAlertController

    IOS8之后增加了UIAlertController类,它可以表示UIAlertView和UIActionSheet.它继承自UIViewController. - (BOOL)application ...

  2. MySql__centos6.5源码安装

    安装MySql步骤如下: 依赖包检查安装 配置防火墙 配置hosts文件 配置sysctl.cnf 检查是否安装mysql 如果有卸载掉(指的是没有用的mysql) 创建用户属组 创建相应目录并修改权 ...

  3. ASP.NET 省市县三联动 (包含用户控件)

    将压缩文件下载解压后,将用户控件拖到解决方案里,直接可以拖到需要用到的页面里 使用: 数据库是最新的(父子级关系表结构----Region2016.sql) 右键记事本打开,放在sqlServerl里 ...

  4. MVC初级教程(四)

      演示产品源码下载地址:http://www.jinhusns.com/Products/Download 

  5. SEO记录-1

    第一天 formal dressesformal dresses 2013formal dresses salecheap formal dressesformal dresses onlinefor ...

  6. (一)面向对象的javascript

    javascript是一门典型的动态类语言 一:鸭式辨型(指导我们关注对象的行为,而不关注对象本身). var duck = { duckString: function(){ console.log ...

  7. 转载:sql用逗号连接多张表对应哪个join?

    http://blog.csdn.net/huanghanqian/article/details/52847835 四种join的区别已老生常谈: INNER JOIN(也可简写为JOIN): 如果 ...

  8. [翻译]Review——24 tips for React Native you probably want to know

    Post author: Albert Gao Post link: http://www.albertgao.xyz/2018/05/30/24-tips-for-react-native-you- ...

  9. javaweb jdbc实现简单的数据库基本操作和servlet的作用域以及jsp标签的使用

    一,工具类,分页类和连接数据库jdbc package com.direct.util; import java.sql.Connection; import java.sql.DriverManag ...

  10. PHP 数值处理的几种常用的方法

    一.直接取整,舍弃小数,保留整数:intval(): intval(9.21); /*结果是9*/ intval(9.89); /*结果是9*/ intval(string); /*如果里面是字符串, ...