webpack中的extract-text-webpack-plugin插件使用方法总结

为什么要用 extract-text-webpack-plugin这个插件,这个插件可以为我们实现样式模块化,并且在打包的时候可以生成一个总得css文件。我是在react的项目中用到的。接下来怎么用呐?

1,首先我们npm安装 npm install extract-text-webpack-plugin --save-dev.

2,在webpack.config.js中进行配置 首先我们要引入

const ExtractTextWebpack = require("extract-text-webpack-plugin"); 关于里边参数的详细说明可以看git官网https://github.com/webpack-contrib/extract-text-webpack-plugin
    module: {
        loaders: [
            {
                test: /\.js(x)?$/,
                loader: "babel-loader",
                exclude: /mode_modules/
            },
            {
                test: /\.css$/,
                use: ExtractTextWebpack.extract({
                    fallback: ‘style-loader‘,
                    use: [‘css-loader‘],
                    publicPath: path.resolve(__dirname, ‘dist‘)
                })
            }
        ]
    }

 3:我们想在编译后看到这个文件夹,这样就会在我们的dist目录下生成一个 style.css了,如果你用的是less。sass,stylus这个时候你只需要下载相应的loader然后在里边做相应的配置就好了

plugins: [
        new HtmlWebpackPlugin({
            template: path.resolve(__dirname, ‘./src/index.html‘)
        }),
        new ExtractTextWebpack("style.css")
    ]
时间: 2024-10-28 11:43:17

webpack中的extract-text-webpack-plugin插件使用方法总结的相关文章

Sumblime Text 2/3 插件安装方法

使用Package Control组件安装 按Ctrl+`调出console(注:安装有QQ输入法的这个快捷键会有冲突的,输入法属性设置-输入法管理-取消热键切换至QQ拼音): 如果是sublime text2  输入以下python代码:import urllib2,os,hashlib; h = '2915d1851351e5ee549c20394736b442' + '8bc59f460fa1548d1514676163dafc88'; pf = 'Package Control.subl

Sublime text追踪函数插件

Sublime Text2/3怎样在Ubuntu中配置CTags插件 | 浏览:1278 | 更新:2014-03-05 10:34 1 2 3 4 5 6 7 分步阅读 本文详解在Ubuntu Linux中配置Sublime Text的CTags插件,并实现函数跟踪转跳的开发环境. 演示使用的是Ubuntu 12.04 64位操作系统和Sublime Text 3 64位版 安装配置ctags前请确保已安装Package Control插件管理器 工具/原料 Sublime Text 2/3

在webpack中使用postcss之插件包precss

precss是一个预处理css的插件包,集成了很多postcss插件的功能,比如嵌套,变量,继承,混合,循环,判断.下面来介绍如何在webpack中使用precss.一.新建项目1.新建package.json #自动生成package.json文件 npm init 2.新建webpack.config.js module.exports = { entry: "./main.js", output: { path: __dirname, // __dirname是node.js中的

webpack入门(四)——webpack loader 和plugin

什么是loader loaders是你用在app源码上的转换元件.他们是用node.js运行的,把源文件作为参数,返回新的资源的函数. 例如,你可以用loaders告诉webpack加载 coffeeScript或者JSX. loaders 特点: 1. 可以链式拼接.他们用在通向文件的管道,最后一个loader预期返回一个javascript,其它Loader可以返回任意格式给下一个loader. 2. loaders可以是同步的,也可以是异步的. 3. loaders是用node.js来跑,

webpack渐入佳境系列一:webpack环境配置与打包基础【附带各种 "坑" 与解决方案!持续更新中...】

首先介绍传统模块化开发的主流方案: 1.基与CMD的sea.js,玉伯提出的解决方案,据说原来京东团队在使用.用时才定义,就近加载.最近在浏览seajs官方文档时发现seajs的域名已经在转卖,惊恐万分之余又想起了那句话,国内团队开发的技术,不是十全九美的最好不要用.国内高强度的生活节奏与压力使得日常维护变得很吃力.(想到这里,不禁为vue捏了一把汗,不过还好vue的前景非常光明!). 2.基于AMD的require.js,之前在用.提前声明与定义.国外团队维护. 3.基于commonJS的we

Webpack中的路径

webpack中涉及许多路径参数的配置.在此做个整理. context context是webpack编译时的基础目录,entry入口会相对于此目录查找. 若不配置,默认值是当前目录,webpack设置context.默认值代码: this.set("context", process.cwd()); 即webpack运行所在目录. context应该是绝对路径,假设入口是src/main.js,则可以设置 { context: path.resolve("./src&quo

在webpack中使用postcss-px2rem的

经过一番折腾重要搞定了. 首先需要安装postcss-plugin-px2rem. npm install --save-dev postcss-plugin-px2rem 我的webpack工程中没有webpack.config.js,倒是有webpack.base.config.js文件.从这个文件中得知 vue结尾文件引用vue-loader.config.js中的配置,如下便这个文件. 下面的第5.19-21行为自己添加.rootValue中的75为 1rem所对应的px:默认为100,

webpack中hash与chunkhash区别和需要注意的问题

项目发布时,为了解决缓存,需要进行md5签名,这时候就需要用到 hash 和 chunkhash等. 问题一:hash问题 使用 hash 对js和css进行签名时,每一次hash值都不一样,导致无法利用缓存 原因是因为, hash 字段是根据每次编译compilation的内容计算所得,也可以理解为项目总体文件的hash值,而不是针对每个具体文件的.(所以每一次编译都会有一个新的hash,并不适用) 解决:不用hash,而用 chunkhash (js和css要使用chunkhash), ch

解决Webpack中提示syntax 'classProperties' isn't currently enabled的错误

当我们使用了一些JavaScript的一些新特性的时候,但是有没有在webpack.config.js里面或者是.babelrc文件中配置相关插件,就可以解决了. error:Support for the experimental syntax 'classProperties' isn't currently enable 解决方案:安装如下插件 npm i -D @babel/plugin-proposal-class-properties 在babelrc中配置插件: options:

在webpack中区分环境变量

webpack 中的定义插件可以帮我们定义一些全局变量,使用方法如下: plugins: [ new webpack.DefinePlugin({ NODE_ENV: JSON.stringify('development') }) ] 在 webpack.DefinePlugin 中定义,传入对象作为参数,key 是名称,value 是值,在这里你需要注意 value 的表现形式,如果是个字符串 NODE_ENV: 'development' 在取环境变量的时候 NODE_ENV 代表的是 d