My webpack study notes (b)

Foreword

Previous article we talked about multi-page js package, package, we continue scss of this article.

Multi-page css packaged separately

First, we write css uses a sass, so let's install sass-loader and can be used dependent

$ npm install sass-loader node-sass css-loader style-loader --save-dev

After installing the loaders, the following were added in the following code webpack.config.js

rules: [
  {
    test: /\.scss$/,
    use: extractPlugin.extract({
      fallback: 'style-loader',
      use: [{
          loader: "css-loader"
      }, {
          loader: "sass-loader",
          options: {
              includePaths:[__dirname+"/src/css/app",__dirname+"/src/css/base"]
          }
      }]
    })
  }
]

Then we need to extract-text-webpack-plugin to extract and output plug into separate css

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

References in webpack.config.js

const path = require('path')
const webpack = require('webpack') //to access built-in plugins
const fs = require('fs')
const extractPlugin = require('extract-text-webpack-plugin')
function getEntry() {
    let jsPath = path.resolve(__dirname, 'src/js/app')
    let dirs = fs.readdirSync(jsPath)
    let matchs = [], files = {}
    dirs.forEach(function (item) {
        matchs = item.match(/(.+)\.js$/);
        if (matchs) {
            files[matchs[1]] = path.resolve(__dirname, 'src/js/app', item)
        }
    })
    return files
}
const extractSass = new extractPlugin({
    filename: "[name]/[name].css"
})
module.exports = {
    entry: getEntry(),
    output: {
      path: path.join(__dirname, "src/dist/"), //文件输出目录
      publicPath: "http://www.workspace.com/webpack-demo/src/dist/",       
       //此处要特别注意，比较明显的是css中的图片路径，跟这个设置有关，编译完后可以看下编译后的css中图片路径你就明白了。
      filename: "[name]/[name].js",        //根据入口文件输出的对应多个文件名
    },
    module: {
        loaders: [
          {
              test: /\.js/,
              loader: 'babel-loader',
              include: __dirname + '/src/js'
          }
        ],
        rules: [
          {
            test: /\.scss$/,
            use: extractPlugin.extract({
              fallback: 'style-loader',
              //resolve-url-loader may be chained before sass-loader if necessary
              use: [{
                  loader: "css-loader"
              }, {
                  loader: "sass-loader",
                  options: {
                      includePaths: [__dirname+"/src/css/app",__dirname+"/src/css/base"]
                  }
              }]
            })
          },
          {
            test: /.(png|gif|jpe?g|svg)$/,
            loader: 'url-loader',
            query: {
              limit: 10000
            }
          }
        ]
    },
    plugins: [
        //js文件的压缩
        new webpack.optimize.UglifyJsPlugin({
             compress: {
                 warnings: false
             }
        }),
        extractSass
    ]
}

You will find that in more than a loader loader

The url-loader is processing image files, we want to install the application before its dependencies

$ npm install --save-dev url-loader file-loader

You will find that limit, the rule here is: if the picture size is less than 10k quasi into the picture embedded in the url base64

index.scss follows

@import "../base/base.scss";
$base-font-size: 72;
$base-color:#F5A623;
body{
  color:$base-color;
}
.logo{
  background-image: url('../../asset/logo.jpeg');
}
.error{
  background-image: url('../../asset/404.png');
}

index.js content

import Header from '../module/header'
import '../../css/app/index.scss'
window.onload = function(){
  document.querySelector('.main').innerHTML += Header.html
}

index.html follows

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no"/>
    <meta content="telephone=no" name="format-detection"/>
    <meta name="apple-touch-fullscreen" content="yes"/>
    <meta name="apple-mobile-web-app-capable" content="yes"/>
    <meta name="apple-mobile-web-app-status-bar-style" content="black"/>
    <title>webpack-demo</title>
    <link rel="stylesheet" type="text/css" href="./src/dist/index/index.css"/>
</head>
<body>
  <header class="logo"></header>
  
  <div class="main">
      welcome webpack demo
  </div>
  <div class="error"></div>
</body>
<script src="./src/js/base/require-zepto.js"></script>
<script src="./src/dist/index/index.js"></script>
</html>

Results of the

Ready, let's start packing

First look at the catalog before the package

$ npm run dev