国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

我的webpack學(xué)習(xí)筆記（二）

mcterry / 2256人閱讀

前言

上一篇文章我們講了多頁(yè)面js的打包，本篇文章我們繼續(xù)scss的打包。

多頁(yè)面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中的圖片路徑，跟這個(gè)設(shè)置有關(guān)，編譯完后可以看下編譯后的css中圖片路徑你就明白了。
      filename: "[name]/[name].js",        //根據(jù)入口文件輸出的對(duì)應(yīng)多個(gè)文件名
    },
    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
    ]
}
你會(huì)發(fā)現(xiàn)loader中多了一個(gè)loader

這個(gè)url-loader是處理圖片文件的，在應(yīng)用之前我們要安裝相關(guān)依賴

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

你會(huì)發(fā)現(xiàn)limit，這里的規(guī)則是：如果圖片size小于10k時(shí)把圖片準(zhǔn)換成base64嵌入到url中

index.scss內(nèi)容如下
@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內(nèi)容
import Header from "../module/header"
import "../../css/app/index.scss"
window.onload = function(){
  document.querySelector(".main").innerHTML += Header.html
}
index.html內(nèi)容如下



    
    
    
    
    
    
    webpack-demo
    


  
  
  

      welcome webpack demo
執(zhí)行結(jié)果

準(zhǔn)備完畢，下面我們開始打包

首先看一下打包前的目錄

$ npm run dev
下面看一下打包后文件夾變化

文章版權(quán)歸作者所有，未經(jīng)允許請(qǐng)勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請(qǐng)注明本文地址：http://specialneedsforspecialkids.com/yun/84074.html

相關(guān)文章

  • 我的webpack學(xué)習(xí)筆記（二）

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

    awokezhou 評(píng)論0 收藏0

  • 我的webpack學(xué)習(xí)筆記（二）

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

    hedzr 評(píng)論0 收藏0

  • webpack入門學(xué)習(xí)手記（二）

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

    Joyven 評(píng)論0 收藏0

  • PostCSS自學(xué)筆記（一）【安裝使用篇】

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

    jsummer 評(píng)論0 收藏0

發(fā)表評(píng)論

0條評(píng)論

最新活動(dòng)
閱讀需要支付1元查看
<