extract-text-webpack-plugin 插件在webpack打包时的问题

最新推荐文章于 2020-10-15 10:00:21 发布
最新推荐文章于 2020-10-15 10:00:21 发布
阅读量305 收藏
点赞数
分类专栏： webpack 打包
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/d649237053/article/details/90488925
版权

解决方法：cnpm install extract-text-webpack-plugin@next -D 就解决了，应该是最新更新的，依赖包发生了变化

d lt's me
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
webpack的插件clean-webpack-plugin、html-webpack-plugin
qq_36605557的博客
06-07 3898
1、clean-webpack-plugin的作用：在每次生成dist目录前，先删除本地的dist文件（每次自动删除太麻烦）2、安装clean-webpack-plugin   npm/cnpm i clean-webpack-plugin --save -dev3、在我们的webpack.config.js文件中引入    const  cleanWebpackPlugin=require('c...
webpack插件-html-webpack-plugin
事非宜，勿轻诺；苟轻诺，进退错。
11-27 840
用处：自动生成一个html文件，并且引用相关的assets文件。 用法(webpack.config.js)：
webpack使用extract-text-webpack-plugin打包时提示错误Use Chunks.groupsIterable and filter by instanceof Entryp
前端攻坚战
05-09 452
当前时间2018年5月9日12:13:11在使用webpack4创建时，使用了extract-text-webpack-plugin插件，然而在打包时实现错误：Error: Chunk.entrypoints: Use Chunks.groupsIterable and filter by instanceof Entrypoint instead at Chunk.get (E:\web...
webpack : 无法加载文件 C:\Users\admin\AppData\Roaming\npm\webpack.ps1，因为在此系统上禁止运行脚本。
weixin_43242112的博客
10-02 1530
问题出现场景 安装完webpack-cli之后，首次打包出现一下错误： 问题出现原因 powershell对于脚本的执行有着严格的安全限制 默认是不载入配置文件的 因而报错可使用Set-ExecutionPolicy指令来修改PowerShell中执行策略的用户首选项。 共有四个权限等级可选择： 1.Restricted：不载入配置文件 不执行脚本【默认该权限等级】 2.AllSigned：所有配置文件和脚本必须通过信任的出版商签名 这里的脚本页包括在本地计算机上创建的脚本 3.RemoteSigned
webpack搭建启动之 merge 报错问题
征征酱
10-15 550
webpack-dev-server --open --config ./build/webpack.dev.js --mode development /Users/admin001/Desktop/vue-webpack/build/webpack.dev.js:16 module.exports = merge(webpackBaseConfig, { ^ 报错截图 解决方案 查看项目中使用webpack-merge的地方，一般都是webpack 开发和线上文件中使用到这个 修改之前的代码
webpack--环境分离--webpack-merge工具的使用
NI_chunz的博客
06-19 2084
环境分离 环境分离可以分别提供 给开发时候使用的开发的配置 提供给真正生产时产生最终用户访问的文件的打包配置 生产环境和开发环境刚好相反，开发环境在本地运行，而生产环境是要产出运行在线上服务器面向最终用户使用的代码，因此两者的构建目标差异很大，比如打包后的文件在生产环境中要尽可能的小，逻辑代码分离，优化静态资源（压缩图片），去除错误追踪 source map文件等, 也不需要提供 webpack-dev-server 开发服务器。 因此开发环境和生产环境不要共用一份webpack配置文件，需要分别指定
webpack使用extract-text-webpack-plugin打包时提示错误
Liu_Jun_Tao的博客
08-06 3518
最近使用webpack打包时，报了一个extract-text-webpack-plugin的错误，查找了一下，原来是extract-text-webpack-plugin还不能支持webpack4.0.0以上的版本。在package.json里面看下，果然我使用的webpack版本是v4.16.3，extract-text-webpack-plugin默认安装到的版本是v3.0.2 报错信息：...
extract-text-webpack-plugin用法详解
11-28
另一种就是使用extract-text-webpack-plugin插件，将样式文件单独打包，打包输出的文件由配置文件中的output属性指定。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件。 三 插件使用 1
theme-css-extract-webpack-plugin:一个webpack 插件，用于提取对应的`multipleScopeVars`主题 css 文件
05-04
@zougt/theme-css-extract-webpack-plugin这个 webpack 插件主要用于使用了和的 webpack 工程将对应的multipleScopeVars主题 css 提取出独立的 css 文件提取主题 css 文件的操作只在 webpackConfig.mode:"production...
extract-css-chunks-webpack-plugin:从大块中提取CSS到多个样式表+ HMR
04-28
如果您喜欢我们的工作，请查看我们基于Redux的路由器或其后继者， Extract-css-chunks-webpack-plugin :bottle_with_popping_cork: :bottle_with_popping_cork: :bottle_with_popping_cork: 我们非常高兴宣布Webpack...
详解extract-text-webpack-plugin 的使用及安装
08-27
Webpack 插件 extract-text-webpack-plugin 使用及安装详解 插件简介 ...extract-text-webpack-plugin 插件可以帮助我们将 CSS 样式抽离出来，避免了样式打包在 JS 中引起的页面样式加载错乱的问题。
extract-text-webpack-plugin 的使用及安装
weixin_30879833的博客
03-10 346
extract-text-webpack-plugin该插件的主要是为了抽离css样式,防止将样式打包在js中引起页面样式加载错乱的现象;首先我先来介绍下这个插件的安装方法: npm install extract-text-webpack-plugin --save-dev 首先进入项目的根目录,然后执行以上命令进行插件的安装,插件安装完成后,接下来我们要做的就是在webp...
webpack版本与extract-text-webpack-plugin版本不兼容导致的npm run build运行时报错
qq6412110的博客
03-06 6319
查了是由于extract-text-webpack-plugin该组件不支持webpack4.x以上版本导致。放弃使用extract-text-webpack-plugin可以解决 我的webpack.config.js: { "name": "gnhhc", "version": "1.0.0", "main": "index.js", "scripts": { "...
升级 webpack 到 4.x 版本
mjzhang1993的博客
04-08 9944
升级 webpack 到 4.x 版本 说明 webpack 4 可以零配置启动，也支持通过配置文件进行更细致的配置，相比于上一个版本，配置已经简化了很多 webpack 4 引入了 mode 用来设置开发环境，同时也可以简化配置项，不同的 mode 会携带不同的默认配置 --mode development 开发模式更关注开发体验：编译速度、报错信息 --mode ...
说说webpack 安装过程中的那些错误（坑）
热门推荐
wanxue0804的博客
03-02 4万+
安装webpack可谓是心累啊，我花了好几天时间都没安装好，各种报错啊， 什么Please install 'webpack-cli' in addition to webpack itself to use the CLI. 什么-bash: webpack: command not found 还有No such file or directory各种坑我都基本进了一遍 终于，经过不断...
npm 安装报错 rollbackFailedOptional verb npm-session 解决办法
zyt0818的博客
04-23 357
修改npm的资源镜像链接 1、npm config set registry http://registry.npm.taobao.org 2、npm install webpack@3.6.0 -g 3、成功安装成功 如果还不可以+ zyt1227133791
vue-cli脚手架中webpack配置基础文件详解
weixin_34253539的博客
05-10 632
一、前言 vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webp...
webpack-merge合并webpack配置文件
LLL_liuhui的博客
02-19 8616
下载插件 npm install webpack-merge -D 1、webpack.config.base.js开发环境和生产环境的共同配置 let path = require('path'); let HtmlWebpackPlugin = require('html-webpack-plugin'); const { CleanWebpackPlugin } = requir...
webpack简单配置
马优晨
08-09 1416
一、前言 vue-cli是构建vue单页应用的脚手架，输入一串指定的命令行从而自动生成vue.js+wepack的项目模板。这其中webpack发挥了很大的作用，它使得我们的代码模块化，引入一些插件帮我们完善功能可以将文件打包压缩，图片转base64等。后期对项目的配置使得我们对于脚手架自动生成的代码的理解更为重要，接下来我将基于webpack3.6.0版本结合文档将文件各个击破，纯干料。 重...
extract-text-webpack-plugin安装
最新发布
05-05
要使用 `extract-text-webpack-plugin` 插件，你需要先安装它。在安装之前，确保你已经安装了 Node.js 和 npm。 安装 `extract-text-webpack-plugin` 的命令如下： ``` npm install --save-dev extract-text-webpack-plugin ``` 安装完成后，在 webpack 的配置文件中引入插件： ```javascript const ExtractTextPlugin = require('extract-text-webpack-plugin'); ``` 然后在 `module.rules` 中配置插件的规则： ```javascript module.exports = { // ...其它配置项... module: { rules: [ // ...其它规则... { test: /\.css$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: ['css-loader'] }) } ] }, plugins: [ new ExtractTextPlugin('styles.css') ] }; ``` 在上面的代码中，我们将 `ExtractTextPlugin` 实例化并传入一个输出文件名，然后在 `module.rules` 中的 CSS 规则中使用 `ExtractTextPlugin.extract()` 方法来提取 CSS 到单独文件中。注意，我们同时使用了 `style-loader` 和 `css-loader`，这是因为 `ExtractTextPlugin.extract()` 方法要求至少有一个 loader 是非提取 loader（即不会将文件输出到文件系统中），这里我们使用了 `style-loader` 来将 CSS 插入到 HTML 文档中。 以上代码中，我们还需要在 webpack 配置文件的 `plugins` 中添加 `new ExtractTextPlugin('styles.css')`，这个插件将会在构建时将 CSS 提取到指定的输出文件中。 最后，运行 webpack 构建命令，就能够将 CSS 提取到单独的文件中了。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值