首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

ExtractTextPlugin不在webpack 2工作

ExtractTextPlugin是一个用于将CSS从JavaScript文件中提取出来的webpack插件。它在webpack 2中不再工作的原因是因为webpack 2引入了新的方式来处理CSS,即使用了新的模块系统——CSS模块。在webpack 2中,可以使用内置的style-loadercss-loader来处理CSS模块,并将其直接嵌入到JavaScript文件中。

在webpack 2中,可以通过以下方式来处理CSS模块:

  1. 安装style-loadercss-loader:npm install style-loader css-loader --save-dev
  2. 在webpack配置文件中,使用module.rules配置项来定义处理CSS的规则:module: { rules: [ { test: /\.css$/, use: [ 'style-loader', 'css-loader' ] } ] }
  3. 在JavaScript文件中,可以通过importrequire语句来引入CSS文件:import './styles.css';

这样,webpack会将CSS文件转换为JavaScript模块,并将其嵌入到最终的打包文件中。

需要注意的是,以上方法适用于处理纯CSS文件。如果需要处理Sass、Less等预处理器语言,还需要安装相应的loader,并在webpack配置文件中进行相应的配置。

推荐的腾讯云相关产品:无

参考链接:

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

入门webpack(下)

整理下我们的思路,具体实现方法如下 Babel和webpack是独立的工具 二者可以一起工作 二者都可以通过插件拓展功能 HMR是一个webpack插件,它让你能浏览器中实时观察模块修改后的效果,但是如果你想让它工作...,需要对模块进行额外的配额; Babel有一个叫做react-transform-hrm的插件,可以在不对React模块进行额外的配置的前提下让HMR正常工作; 更新我们的例子来实际看看如何配置 //webpack...');var ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { entry: __dirname...(), new webpack.optimize.UglifyJsPlugin(), new ExtractTextPlugin("style.css") ] } 缓存 缓存无处不在,使用缓存的最好方法是保证你的文件名和文件内容是匹配的...= require('webpack');var HtmlWebpackPlugin = require('html-webpack-plugin');var ExtractTextPlugin =

87660

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作

Vue2+VueRouter2+webpack 构建项目实战(一)准备工作 2017年8月补充 2016年,我写了一系列的 VUE 入门教程,当时写这一系列博文的时候,我也只是一个菜鸟,甚至在写的过程中关闭了代码审查...以下为原文 目录索引 《Vue2+VueRouter2+webpack 构建项目实战(一)准备工作》 《Vue2+VueRouter2+webpack 构建项目实战(二)目录以及文件结构》 《Vue2+...VueRouter2+webpack 构建项目实战(三)配置路由,整俩页面先》 《Vue2+VueRouter2+webpack 构建项目实战(四)接通api,先渲染个列表》 《Vue2+VueRouter2...+webpack 构建项目实战(五)配置子路由》 《Vue2+VueRouter2+webpack 构建项目实战(六)修复代码并通过验证,另发布代码》 之前写的博客没有采用打包工具,而是直接引用js的方式来做的...并且通过几个实际项目的工作,已经验证了自己利用该技术完成项目是没有问题的了。

26520
  • 十:图片处理汇总

    准备工作 如项目代码目录展示的那样,除了常见的app.js作为入口文件,我们将用到的 3 张图片放在/src/assets/img/目录下,并在样式文件base.css中引用这些图片。...代码如下: // webpack.config.js const path = require("path"); const ExtractTextPlugin = require("extract-text-webpack-plugin...在命令行中运行webpack进行打包,size 小于 20kb 的图片被编码,只打包了 2 个 size 大于 20kb 的图片文件: 打开浏览器的控制台,我们的图片已经被成功编码: 3....合成雪碧图 4.1 webpack 配置 在之前的基础上,配置还是很简单的,loader 的引入和环境变量都在注释里面了: const path = require("path"); const ExtractTextPlugin...= require("extract-text-webpack-plugin"); let extractTextPlugin = new ExtractTextPlugin({ filename

    1.2K20

    Webpack2入门

    介绍 webpack 是一个 JavaScript 应用程序模块打包器(module bundler)。webpack 通过快速建立应用程序依赖图表并以正确的顺序打包它们来简化你的工作流。...Webpack可以做什么 处理module依赖关系 打包js,css和png等 降低页面初始加载时间 方便组合第三方组件库 可以转换不同语法成标准语法 安装 这里使用的是 webpack 2.4.1 版本...# 全局安装 npm install -g webpack #本地安装 npm install --save-dev webpack 一个小例子 创建应用并安装必要的依赖库 $ mkdir webpack-demo.../style.css 992 bytes {0} [built] [2] ./index.js 171 bytes {0} [built] [3] ./~/css-loader!....热部署 本地热部署 第一步:启动 webpack $ webpack --watch 第二步:修改代码 第三部:浏览器刷新(访问file:///...

    73470

    走近webpack(4)--css相关拓展

    我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。   ...下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。先看看如何用webpack处理less。   ...这里不再赘述,直接上代码: { test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader...那么你需要在package.json中写入如下配置: "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]...有关node的知识不在这里多说,有兴趣的大家可以自行去学习*/   配置成功,我们在src/index.css中写点没用的代码试试吧。发现打包后的css中并没有我们新加的没用的代码,成功!

    1.1K100

    走近webpack(4)–css相关拓展

    我们前面已经学了很多webpack基本的处理情况,一句话总结就是,一个优秀的webpack项目,主要的核心用法就是整合loader和plugin去处理你想要的任何需求。   ...下面,咱们一起来学学如何用webpack来处理less,sass等预编译器。先看看如何用webpack处理less。   ...这里不再赘述,直接上代码: { test: /\.less$/, use: extractTextPlugin.extract({ use: [{ loader...那么你需要在package.json中写入如下配置: "browserslist": [ "> 1%", "last 2 versions", "not ie <= 8" ]...有关node的知识不在这里多说,有兴趣的大家可以自行去学习*/   配置成功,我们在src/index.css中写点没用的代码试试吧。发现打包后的css中并没有我们新加的没用的代码,成功!

    52210
    领券