我的webpack學習筆記（二）

awokezhou 發布于2019-08-29 12:57 / 2490人閱讀

前言

上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。

多頁面css多帶帶打包

首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴

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

安裝完loaders，下面在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"]
          }
      }]
    })
  }
]

然后我們需要通過extract-text-webpack-plugin插件來提取并輸出成多帶帶的css

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

在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
    ]
}

你會發現loader中多了一個loader

這個url-loader是處理圖片文件的，在應用之前我們要安裝相關依賴

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

你會發現limit，這里的規則是：如果圖片size小于10k時把圖片準換成base64嵌入到url中

index.scss內容如下

@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內容

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

index.html內容如下




    
    
    
    
    
    
    webpack-demo
    


  
  
  
      welcome webpack demo

執行結果

準備完畢，下面我們開始打包

首先看一下打包前的目錄

$ npm run dev

下面看一下打包后文件夾變化

云服務器 GPU云服務器學習筆記學習筆記一基礎學習筆記深度學習筆記

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/112266.html

我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

mcterry 2019-08-20 18:05 評論0 收藏0
我的webpack學習筆記（二）

前言上一篇文章我們講了多頁面js的打包，本篇文章我們繼續scss的打包。多頁面css單獨打包首先，我們css編寫采用的是sass，所以我們先來安裝sass-loader以及可以用到的依賴 $ npm install sass-loader node-sass css-loader style-loader --save-dev 安裝完loaders，下面在webpack.config.js...

hedzr 2019-08-01 17:11 評論0 收藏0
webpack入門學習手記（二）

摘要：例如現在的入門學習手記系列。收到粉絲留言和打賞的喜悅。安裝上一篇入門學習手記一，主要是介紹了的核心概念，是整個學習過程的基礎知識。新生成的類似如下入門學習手記因為生成的內容過多，我直接省略掉了。 showImg(https://segmentfault.com/img/bVbk5Nd?w=1150&h=599); 本人微信公眾號：前端修煉之路，歡迎關注。最近開始想要維護一個個人的公眾...

Joyven 2019-08-23 14:05 評論0 收藏0
PostCSS自學筆記（一）【安裝使用篇】

摘要：而則可制定個人需求的一套解決方案僅安裝需要的插件。迫不及待的你已經等不及安裝使用了吧。安裝及使用一般是結合自動化工具使用，如果要單獨使用可以安裝，這里我先對的安裝使用講解下。接下來說點實際的，如何利用結合自動化工作在項目中使用。 PostCSS介紹 PostCSS是一個利用JS插件來對CSS進行轉換的工具，這些插件非常強大，強大到無所不能。其中，Autoprefixer就是眾多Post...

jsummer 2019-08-29 13:17 評論0 收藏0