webpack使用插件将css抽取出来

最新推荐文章于 2024-05-11 09:47:06 发布

霸道流氓气质

最新推荐文章于 2024-05-11 09:47:06 发布

阅读量780

点赞数

分类专栏： Webpack 文章标签： webpack

本文链接：https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83087330

版权

Webpack 专栏收录该内容

10 篇文章 0 订阅

订阅专栏

前言：

我们使用加载器来加载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.css
  new 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

霸道流氓气质

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
打赏
0
评论
webpack使用插件将css抽取出来

前言：我们使用加载器来加载css样式，但是此时css是通过js动态创建&lt;style&gt;标签来写入，如果不希望这样做，可以使用插件 extract-text-webpack-plugin 将css抽取出来，并生成一个main.css的文件，最终在index.html中通过&lt;link&gt;的形式加载它。使用加载器来加载css样式参照：https://blog.csdn...
复制链接

扫一扫