我的webpack学习笔记（二）

awokezhou 发布于2019-08-29 12:57 / 2411人阅读

前言

上一篇文章我们讲了多页面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云服务器云服务器学习笔记学习笔记一基础学习笔记深度学习笔记

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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