1 安裝加載器 Loader

[ahcj@localhost learn-webpack]$ npm install --save-dev  css-loader style-loader
[ahcj@localhost learn-webpack]$ npm install --save-dev  less less-loader 
[ahcj@localhost learn-webpack]$ npm install --save-dev  node-sass sass-loader 

2 修改webpack.config.js,添加 module 配置項目

module.exports = {
  devtool: 'source-map', //在一個單獨的文件中產生一個完整且功能完全的source map
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"http://打包后輸出文件的文件名
  },
  devServer: {
    contentBase: "./public",//本地服務器所加載的頁面所在的目錄
    port:8080, //默認監聽端口，如果省略，默認為”8080“
    historyApiFallback: true,//不跳轉
    inline: true//實時刷新
  },
  module: { 
      rules: [ 
            {
                test: /\.css$/,
                loader: "style-loader!css-loader"
            },
            {
                test: /\.less$/,
                loader: "style-loader!css-loader!less-loader"
            }
      ] 
  }
}

3 新增 css 文件

app/greet.css

.box {
  color: blue;
  background-color: red;
  padding: 10px;
  border: 3px solid #ccc;
  opacity: 0.5;
  margin: 100px;
}

4 新增 less 文件

app/main.less

@base: #f938ab;
html,body {
  background:@base;
}

5 運行

[ahcj@localhost learn-webpack]$ npm run serve

屏幕截圖.png