webpack使用插件将css抽取出来

前言：

我们使用加载器来加载css样式，但是此时css是通过js动态创建<style>标签来写入，如果不希望这样做，

可以使用插件 extract-text-webpack-plugin 将css抽取出来，并生成一个main.css的文件，最终在index.html中通过<link>的形式加载它。

使用加载器来加载css样式参照：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83081468

通过npm安装插件

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

修改代码：

然后在配置文件中导入插件，打开webpack.config.js：

var path = require('path');
//导入插件
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var config = {entry:{main:'./main'},output:{path:path.join(__dirname,'./dist'),publicPath:'/dist/',filename:'main.js'},module:{rules:[{test:/\.css$/,use: ExtractTextPlugin.extract({use:'css-loader',fallback:'style-loader'})          }]},plugins:[//提取后的css文件将其命名为mian.cssnew ExtractTextPlugin("main.css")]};module.exports = config;

修改inex.html:

<!DOCTYPE HTML>
<html><head><title> hello webpack </title><link rel="stylesheet" type="text/css" href="/dist/main.css"></link><meta charset="utf-8"></head><body><div id="app">Hello Webpack!!!!!!</div><script type="text/javascript" src="/dist/main.js"></script></body>
</html>

重新启动服务，就可以看到<style>已经没有了，通过link引入的main.css已经生效。

如果在启动服务时出错，参照：

https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83087654

webpack使用插件将css抽取出来相关推荐

webpack：js、css、es6装载与压缩配置-学习笔记
文章目录 webpack:js.css.es6装载与压缩配置-学习笔记 css文件打包 loader执行顺序 loader与plugin区别 less css抽取 js,css压缩处理依赖包降级处理 ...
Webpack之插件html webpack plugin
Webpack之插件html webpack plugin html-webpack-plugin插件动态生成html文件并自动引入js文件静态文件无需加载js或css文件,通过设置入口文件可以将 ...
【webpack】webpack 常用插件集合
1. extract-text-webpack-plugin webpack默认会将css当做一个模块打包到一个chunk中,extract-text-webpack-plugin的作用就是将css提 ...
webpack 打包html中css样式如果处理,webpack中单独打包css样式
这次给大家带来webpack中单独打包css样式,webpack中单独打包css样式的注意事项有哪些,下面就是实战案例,一起来看一下. 零.介绍以下是个人项目中总结出来的一些基本知识,记录在这里,加 ...
emmet插件使用(Css)
emmet插件使用(Css) 渐变输入lg(left,#fff50%,#000),会生成如下代码 background-image: -webkit-gradient(linear, 0 0, 10 ...
基于webpack修改插件源码，使用自定义文件替换node_modules里面的源码文件
基于webpack修改插件源码,使用自定义文件替换node_modules里面的源码文件需求:插件不满足要求,需要修改源码,但又想永远保留自己修改的这份,不想被重新下载的覆盖方法:在运行时执行你替 ...
使用插件(layui.css)对原本样式的影响
使用插件(layui.css)对原本样式的影响作者:吱韩菌开发工具:Visual Studio 2015 撰写时间:2019-5-23 下面是我最近做的一个页面遇到的问题,在页面设计到一半时,发现 ...
webpack插件实现自动抽取css中的主题色样式，并动态切换主题色（element-ui）
项目项目中用了element-ui,有切换主题色的需要.但官方的方式,有几个问题: 1.需要下载整个element-ui的样式css,并替换其中的css样式颜色.文件较大,下载慢且影响性能. 2.只能 ...
webpack如何将css文件分离的,【Webpack小书】Webpack中如何将CSS样式抽取到独立文件中？ - Tim的资源站...
现在我们有一个很好的打包了,但所有的 CSS 都去了哪里?根据配置,它已被内联到 JavaScript!虽然这在开发过程中很方便,但听起来并不理想. 当前的解决方案 CSS 是无法缓存的,并且还有一个 ...

webpack使用插件将css抽取出来

前言：

通过npm安装插件

修改代码：

webpack使用插件将css抽取出来相关推荐

最新文章

热门文章