Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件

webpack系列目录

webpack 系列 二:webpack 介绍&安装

webpack 系列 三:webpack 如何集成第三方js库

webpack 系列 四:webpack 多页面支持 & 公共组件单独打包

webpack 系列 五:webpack Loaders 模块加载器

webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署

基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com/ifengkou/webpack-template

正文

Webpack将所有静态资源都认为是模块,比如JavaScript,CSS,LESS,TypeScript,JSX,CoffeeScript,图片等等,从而可以对其进行统一管理。为此Webpack引入了加载器的概念,除了纯JavaScript之外,每一种资源都可以通过对应的加载器处理成模块。和大多数包管理器不一样的是,Webpack的加载器之间可以进行串联,一个加载器的输出可以成为另一个加载器的输入。比如LESS文件先通过less-load处理成css,然后再通过css-loader加载成css模块,最后由style-loader加载器对其做最后的处理,从而运行时可以通过style标签将其应用到最终的浏览器环境。

一 常用loader

安装css/sass/less loader加载器

代码如下:

cnpm install file-loader css-loader style-loader sass-loader ejs-loader html-loader jsx-loader image-webpack-loader --save-dev

webpack.config.js配置:

module: {
 loaders: [
  {
   test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
   loaders: [
    // 小于10KB的图片会自动转成dataUrl
    'url?limit=10240&name=img/[hash:8].[name].[ext]',
    'image?{bypassOnDebug:true, progressive:true,optimizationLevel:3,pngquant:{quality:"65-80",speed:4}}'
   ]
  },
  {
   test: /\.((ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot)$/,
   loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]'
  },
  {test: /\.(tpl|ejs)$/, loader: 'ejs'},
  {test: /\.css$/, loader: 'style-loader!css-loader'},
  { test: /\.scss$/, loader: 'style!css!sass'}
 ]
},

index.html 新增两个div

<div class="small-webpack"></div>
<div class="webpack"></div>

index.css 增加两个图片,同时将webpack.png(53kb) 和 small-webpack.png(9.8k)

.webpack {
 background: url(../img/webpack.png) no-repeat center;
 height:500px;
}
.small-webpack {
 background: url(../img/small-webpack.png) no-repeat center;
 height:250px;
}

index.js 引入css

require('../css/index.css');

执行webpack指令

$ webpack

查看生成的目录结构

其中并没有css文件,css被写入到了index.js中,index.js 部分截图

总结:

图片采用了url-loader加载,如果小于10kb,图片则被转化成 base64 格式的 dataUrl

css文件被打包进了js文件中

css被打包进了js文件,如果接受不了,可以强制把css从js文件中独立出来。官方文档是以插件形式实现:文档docs点这插件的github点这

二:extract-text-webpack-plugin 插件介绍

Extract text from bundle into a file.从bundle中提取出特定的text到一个文件中。使用 extract-text-webpack-plugin就可以把css从js中独立抽离出来

安装

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

使用(css为例)

var ExtractTextPlugin = require("extract-text-webpack-plugin");
module.exports = {
 module: {
  loaders: [
   { test: /\.css$/, loader: ExtractTextPlugin.extract("style-loader", "css-loader") }
  ]
 },
 plugins: [
  new ExtractTextPlugin("styles.css")
 ]
}

它将从每一个用到了require("style.css")的entry chunks文件中抽离出css到单独的output文件

API

new ExtractTextPlugin([id: string], filename: string, [options])

  1. id Unique ident for this plugin instance. (For advanded usage only, by default automatic generated)
  2. filename the filename of the result file. May contain [name], [id] and [contenthash].
    1. [name] the name of the chunk
    2. [id] the number of the chunk
    3. [contenthash] a hash of the content of the extracted file
  3. options
    1. allChunks extract fromall additional chunks too (by default it extracts only from the initial chunk(s))
    2. disable disables the plugin

ExtractTextPlugin.extract([notExtractLoader], loader, [options])

根据已有的loader,创建一个提取器(loader的再封装)

  1. notExtractLoader (可选)当css没有被抽离时,加载器不应该使用(例如:当allChunks:false时,在一个additional 的chunk中)
  2. loader 数组,用来转换css资源的加载器s
  3. options
    1. publicPath 重写该加载器(loader)的 publicPath 的设置

多入口文件的extract的使用示例:

let ExtractTextPlugin = require('extract-text-webpack-plugin');

// multiple extract instances
let extractCSS = new ExtractTextPlugin('stylesheets/[name].css');
let extractLESS = new ExtractTextPlugin('stylesheets/[name].less');

module.exports = {
 ...
 module: {
 loaders: [
  {test: /\.scss$/i, loader: extractCSS.extract(['css','sass'])},
  {test: /\.less$/i, loader: extractLESS.extract(['css','less'])},
  ...
 ]
 },
 plugins: [
 extractCSS,
 extractLESS
 ]
};

三:改造项目-抽离css

安装插件到项目

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

配置webpack.config.js,加入ExtractTextPlugin和相关处理:

var webpack = require("webpack");
var path = require("path");
var srcDir = path.resolve(process.cwd(), 'src');
var nodeModPath = path.resolve(__dirname, './node_modules');
var pathMap = require('./src/pathmap.json');
var glob = require('glob')
var CommonsChunkPlugin = webpack.optimize.CommonsChunkPlugin;
var HtmlWebpackPlugin = require('html-webpack-plugin');
var ExtractTextPlugin = require('extract-text-webpack-plugin');
var entries = function () {
 var jsDir = path.resolve(srcDir, 'js')
 var entryFiles = glob.sync(jsDir + '/*.{js,jsx}')
 var map = {};

 for (var i = 0; i < entryFiles.length; i++) {
  var filePath = entryFiles[i];
  var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
  map[filename] = filePath;
 }
 return map;
}

var html_plugins = function () {
 var entryHtml = glob.sync(srcDir + '/*.html')
 var r = []
 var entriesFiles = entries()
 for (var i = 0; i < entryHtml.length; i++) {
  var filePath = entryHtml[i];
  var filename = filePath.substring(filePath.lastIndexOf('\/') + 1, filePath.lastIndexOf('.'));
  var conf = {
   template: 'html!' + filePath,
   filename: filename + '.html'
  }
  //如果和入口js文件同名
  if (filename in entriesFiles) {
   conf.inject = 'body'
   conf.chunks = ['vendor', filename]
  }
  //跨页面引用,如pageA,pageB 共同引用了common-a-b.js,那么可以在这单独处理
  //if(pageA|pageB.test(filename)) conf.chunks.splice(1,0,'common-a-b')
  r.push(new HtmlWebpackPlugin(conf))
 }
 return r
}
var plugins = [];
var extractCSS = new ExtractTextPlugin('css/[name].css?[contenthash]')
var cssLoader = extractCSS.extract(['css'])
var sassLoader = extractCSS.extract(['css', 'sass'])

plugins.push(extractCSS);

plugins.push(new CommonsChunkPlugin({
 name: 'vendor',
 minChunks: Infinity
}));

module.exports = {
 entry: Object.assign(entries(), {
  // 用到什么公共lib(例如jquery.js),就把它加进vendor去,目的是将公用库单独提取打包
  'vendor': ['jquery', 'avalon']
 }),
 output: {
  path: path.join(__dirname, "dist"),
  filename: "[name].js",
  chunkFilename: '[chunkhash:8].chunk.js',
  publicPath: "/"
 },
 module: {
  loaders: [
   {
    test: /\.((woff2?|svg)(\?v=[0-9]\.[0-9]\.[0-9]))|(woff2?|svg|jpe?g|png|gif|ico)$/,
    loaders: [
     //小于10KB的图片会自动转成dataUrl,
     'url?limit=10000&name=img/[hash:8].[name].[ext]',
     'image?{bypassOnDebug:true, progressive:true,optimizationLevel:3,pngquant:{quality:"65-80",speed:4}}'
    ]
   },
   {
    test: /\.((ttf|eot)(\?v=[0-9]\.[0-9]\.[0-9]))|(ttf|eot)$/,
    loader: 'url?limit=10000&name=fonts/[hash:8].[name].[ext]'
   },
   {test: /\.(tpl|ejs)$/, loader: 'ejs'},
   {test: /\.css$/, loader: cssLoader},
   {test: /\.scss$/, loader: sassLoader}
  ]
 },
 resolve: {
  extensions: ['', '.js', '.css', '.scss', '.tpl', '.png', '.jpg'],
  root: [srcDir, nodeModPath],
  alias: pathMap,
  publicPath: '/'
 },
 plugins: plugins.concat(html_plugins())
}

其中,用ExtractTextPlugin 来抽离css

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('css/[name].css?[contenthash]')
var cssLoader = extractCSS.extract(['css'])
var sassLoader = extractCSS.extract(['css', 'sass'])

plugins.push(extractCSS);
......
//conf - module - loaders
{test: /\.css$/, loader: cssLoader},
{test: /\.scss$/, loader: sassLoader}

注意事项:

css中img的路径会出现问题,通过设置publicPath 解决,采用绝对路径

output: {
 ......
 publicPath: "/"
},

运行:

$ webpack

期望

  1. css单独抽离,打包成单独的css文件
  2. html自动引用css文件
  3. 小于10k的图片,转成base64 格式的 dataUrl
  4. webpack.png 会被压缩,减少文件大小

运行webpack后的项目的目录结构:

生成的 dist/index.html 自动引用了 index.css 和相关的js,由于设置了publicPath 所以相应的链接都采用了绝对路径

生成的 dist/index.css 小图片被转成了data:image形式:

结果:

  1. css单独打包到css目录
  2. html自动注入了link 标签
  3. small-webpack.png 小于10k,被打包进了index.css
  4. webpack.png 由原来的50+k 被压缩成 10- k

最后,运行 webpack-dev-server 看一下运行结果:

总结

Webpack将所有静态资源都认为是模块,而通过loader,几乎可以处理所有的静态资源,图片、css、sass之类的。并且通过一些插件如extract-text-webpack-plugin,可以将共用的css抽离出来

下篇介绍改进webpack.config.js:

  1. 区分开发环境和生产环境
  2. 集成 gulp 实现自动构建打包部署
  3. github 发布 前端自动化构建的项目模板

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持我们。

(0)

相关推荐

  • 关于webpack2和模块打包的新手指南(小结)

    webpack已成为现代Web开发中最重要的工具之一.它是一个用于JavaScript的模块打包工具,但是它也可以转换所有的前端资源,例如HTML和CSS,甚至是图片.它可以让你更好地控制应用程序所产生的HTTP请求数量.允许你使用其他资源的特性(例如Jade.Sass和ES6).webpack还可以让你轻松地从npm下载包. 本文主要针对那些刚接触webpack的同学,将介绍初始设置和配置.模块.加载器.插件.代码分割和热模块替换. 在继续学习下面的内容之前需要确保你的电脑中已经安装了Node

  • webpack配置sass模块的加载的方法

    webpack管理的项目,我们希望用sass定义样式,为了正常编译,需要做如下配置.这里不讲webpack的入门,入门的文章,我推荐这篇<webpack入门>. 为了使用sass,我们需要安装sass的依赖包 //在项目下,运行下列命令行 npm install --save-dev sass-loader //因为sass-loader依赖于node-sass,所以还要安装node-sass npm install --save-dev node-sass 当然了,使用样式的话,css-lo

  • jQuery 移动端拖拽(模块化开发,触摸事件,webpack)

    通过jquery可以很容易实现CP端的拖拽.但是在移动端却不好用了.于是我自己写了一个在移动端的拖拽demo,主要用到的事件是触摸事件(touchstart,touchmove和touchend). 这个demo实现的功能是:可以拖拽的元素(在这里是图片)位于列表中,这些元素可以被拖到指定区域,到达指定区域(控制台)后,元素被插入控制台后,原来的拖动元素返回原位置,新的元素依然可以在控制台中拖动,也能拖出控制台. 在这个demo中一个用三个模块,分别为ajax模块,drag模块,position

  • 探索webpack模块及webpack3新特性

    本文从简单的例子入手,从打包文件去分析以下三个问题:webpack打包文件是怎样的?如何做到兼容各大模块化方案的?webpack3带来的新特性又是什么? 一个简单的例子 webpack配置 // webpack.config.js module.exports = { entry: './src/index.js', output: { filename: 'bundle.js', path: path.resolve(__dirname, 'dist') }, }; 简单的js文件 // sr

  • 详解用webpack把我们的业务模块分开打包的方法

    webpack我自己还在摸索学习中,今天给大家分享个用webpack把我们的业务模块分开打包的方法,顺便留个笔记 如何用webpack打包这3个js? 只需修改webpack的配置文件webpack.config.js: // entry是入口文件,可以多个,代表要编译那些js entry:['./src/main.js','./src/login.js','./src/reg.js'], 这样就可以全部打包,最终生成./build/js/build.js 1,那么如果我们想最后生成不同的文件,

  • 详解react-webpack2-热模块替换[HMR]

    本文介绍了react-webpack2-热模块替换[HMR],分享给大家,具体如下: 模块热替换功能会在应用程序运行过程中替换.添加或删除模块,而无需重新加载页面.这使得你可以在独立模块变更后,无需刷新整个页面,就可以更新这些模块,极大地加速了开发时间. babel 配置 需要先下载 npm install --save-dev react-hot-loader@3.0.0-beta.6 然后在 .babelrc 中配置 { "presets": [ ["es2015&quo

  • Webpack常见静态资源处理-模块加载器(Loaders)+ExtractTextPlugin插件

    webpack系列目录 webpack 系列 二:webpack 介绍&安装 webpack 系列 三:webpack 如何集成第三方js库 webpack 系列 四:webpack 多页面支持 & 公共组件单独打包 webpack 系列 五:webpack Loaders 模块加载器 webpack 系列 六:前端项目模板-webpack+gulp实现自动构建部署 基于webpack搭建纯静态页面型前端工程解决方案模板, 最终形态源码见github: https://github.com

  • 详解webpack模块加载器兼打包工具

     什么是 webpack? webpack是近期最火的一款模块加载器兼打包工具,它能把各种资源,例如JS(含JSX).coffee.样式(含less/sass).图片等都作为模块来使用和处理. 我们可以直接使用 require(XXX) 的形式来引入各模块,即使它们可能需要经过编译(比如JSX和sass),但我们无须在上面花费太多心思,因为 webpack 有着各种健全的加载器(loader)在默默处理这些事情,这块我们后续会提到. 你可以不打算将其用在你的项目上,但没有理由不去掌握它,因为以近

  • 深入理解requireJS-实现一个简单的模块加载器

    在前文中我们不止一次强调过模块化编程的重要性,以及其可以解决的问题: ① 解决单文件变量命名冲突问题 ② 解决前端多人协作问题 ③ 解决文件依赖问题 ④ 按需加载(这个说法其实很假了) ⑤ ...... 为了深入了解加载器,中间阅读过一点requireJS的源码,但对于很多同学来说,对加载器的实现依旧不太清楚 事实上不通过代码实现,单单凭阅读想理解一个库或者框架只能达到一知半解的地步,所以今天便来实现一个简单的加载器 加载器原理分析 分与合 事实上,一个程序运行需要完整的模块,以下代码为例: /

  • 代码详解javascript模块加载器

    定义 var MyModules = (function Manager() { var modules = {}; function define (name, deps, impl) { for(var j = 0, length = deps.length; j < length; j++){ deps[j] = modules[deps[j]]; } modules[name] = impl.apply(impl, deps); } function get (name) { retur

  • 通过实例解析js简易模块加载器

    前端模块化 关注前端技术发展的各位亲们,肯定对模块化开发这个名词不陌生.随着前端工程越来越复杂,代码越来越多,模块化成了必不可免的趋势. 各种标准 由于javascript本身并没有制定相关标准(当然es6已经有了import和export),所以在模块化方面诞生了各种不同的规范.主要有AMD规范(随requirejs诞生而普及),CMD规范(随seajs的出现而普及),commonjs(主要用于node,并不适合前端).至于以上几种规范的异同,无耻的我在这里就不多费口水了,请还不了解的亲们自行

  • 概述如何实现一个简单的浏览器端js模块加载器

    在es6之前,js不像其他语言自带成熟的模块化功能,页面只能靠插入一个个script标签来引入自己的或第三方的脚本,并且容易带来命名冲突的问题.js社区做了很多努力,在当时的运行环境中,实现"模块"的效果. 通用的js模块化标准有CommonJS与AMD,前者运用于node环境,后者在浏览器环境中由Require.js等实现.此外还有国内的开源项目Sea.js,遵循CMD规范.(目前随着es6的普及已经停止维护,不论是AMD还是CMD,都将是一段历史了) 浏览器端js加载器 实现一个简

  • in.js 一个轻量级的JavaScript颗粒化模块加载和依赖关系管理解决方案

    国外的像基于jQuery的RequireJs,YUI Loader,LabJs,RunJs,国内也有淘宝的SeaJs,豆瓣的DoJs等,这些都是一些十分优秀的模块加载器.但是本文将会向大家介绍一个新的开源的轻量级"多线程"异步模块加载器In.js,In的开发借鉴了Do的一些思路和使用习惯,在此期间感谢@kejun同我的耐心交流,In.js压缩后只有4.77k,不仅小巧而且十分好用. 优点: 按需加载 无阻塞加载 依赖关系管理 颗粒化模块管理 如何使用? A.引入In.js 复制代码 代

  • require加载器实现原理的深入理解

    前言 我们常说node并不是一门新的编程语言,他只是javascript的运行时,运行时你可以简单地理解为运行javascript的环境.在大多数情况下我们会在浏览器中去运行javascript,有了node的出现,我们可以在node中去运行javascript,这意味着哪里安装了node或者浏览器,我们就可以在哪里运行javascript. 1.node模块化的实现 node中是自带模块化机制的,每个文件就是一个单独的模块,并且它遵循的是CommonJS规范,也就是使用require的方式导入

  • vue-cli与webpack处理静态资源的方法及webpack打包的坑

    通过Vue-cli进行webpack打包的坑 Vue-cli为Vue项目搭建的脚手架的确很方便,但打包时容易出现空白页,或者对应的静态资源加载不了. 我是通过将项目/config下的index.js的assetsPublicPath变成'./',变成相对路径,进行解决. cd vue demo npm run dev //运行程序 npm run bulid //webpack打包 处理静态资源 你也许会注意到vue-cli与webpack结合的项目中,我们通常会有两个静态资源的路径:src/a

  • webpack的CSS加载器的使用

    什么是loader loader用于转换应用程序的资源文件,他们是运行在nodejs下的函数,使用参数来获取一个资源的来源并且返回一个新的来源(资源的位置),例如:你可以使用loader来告诉webpack去加载一个coffeeScript或者Babel文件. loader的解析 loader的解析类似模块,一个loader模块会导出一个方法并且可被nodejs写为可兼容的JavaScript,通常情况下通过npm来管理loader,但你也可以把loader放在自己的应用里. webpack中常

随机推荐