webpack使用插件将css抽取出来-CFANZ编程社区

webpack使用插件将css抽取出来

前言：

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

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

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

通过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已经生效。

0 条评论