我的webpack学习笔记（二）

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

前言

上一篇文章我们讲了多页面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

下面看一下打包后文件夹变化

服务器托管超融合服务器学习笔记学习笔记一基础学习笔记深度学习笔记

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

转载请注明本文地址：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...

ninefive 2019-08-05 11:39 评论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