Web前端 - webpack 打包Css

安装css-loader style-loader

npm install css-loader style-loader

前者是为了遍历你的css。后者是为了进行style标记生成。

利用它就可以把CSS给打包了。

我们加入配置文件

{
  test: /\.css$/,
  loaders: ['style‘, ‘css'],
}

module.exports = {
    entry:[
 './es2015/index.js'//代表入口(总)文件 ，可以写多个。
 ],
 output: {
     path: './es2015/',  //输出文件夹
     filename:'index-webpack.js'   //最终打包生成的文件名
 },
 //引用外部加载器
 module: {
      loaders: [
          {
             test: /\.js|jsx$/,   //是一个正则，代表js或者jsx后缀的文件要使用 下面的loader
             loader: 'babel',
             query:{
                 presets:['es2015']
              }
          },
    {
     test: /\.css$/,
     loaders: ['style', 'css'],
    }

      ]
    }
}

建立 daichen.css

div{

 color:red;

}

在入口文件中引用

import {name,age} from "./ui.js";
require("./daichen.css");
console.log(name);
console.log(age);

然后webpack

这个时候就把link引用的样式单删掉即可。