webpack使用插件将css抽取出来

柔情只为你懂 2023-10-18 09:46 73阅读 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][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83081468]

### 通过npm安装插件 ###

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

### 修改代码： ###

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

修改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][https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83087654]

[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83081468]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83081468
[https_blog.csdn.net_BADAO_LIUMANG_QIZHI_article_details_83087654]: https://blog.csdn.net/BADAO_LIUMANG_QIZHI/article/details/83087654