安裝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引用的樣式單刪掉即可。