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

module: {
 loaders: [
  {
   test: /\.((woff2"65-80",speed:4}}'
   ]
  },
  {
   test: /\.((ttf|eot)(\"htmlcode">

<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])

  
id Unique ident for this plugin instance. (For advanded usage only, by default automatic generated)
  
filename the filename of the result file. May contain [name], [id] and [contenthash].
  

    
[name] the name of the chunk
    
[id] the number of the chunk
    
[contenthash] a hash of the content of the extracted file
  
  
  
options
  

    
allChunks extract fromall additional chunks too (by default it extracts only from the initial chunk(s))
    
disable disables the plugin
  
  

ExtractTextPlugin.extract([notExtractLoader], loader, [options])
根据已有的loader，创建一个提取器（loader的再封装）

  
notExtractLoader （可选）当css没有被抽离时，加载器不应该使用（例如：当allChunks:false时，在一个additional 的chunk中）
  
loader 数组，用来转换css资源的加载器s
  
options
  

    
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"dist"),
  filename: "[name].js",
  chunkFilename: '[chunkhash:8].chunk.js',
  publicPath: "/"
 },
 module: {
  loaders: [
   {
    test: /\.((woff2"65-80",speed:4}}'
    ]
   },
   {
    test: /\.((ttf|eot)(\"htmlcode">

var ExtractTextPlugin = require('extract-text-webpack-plugin');
var extractCSS = new ExtractTextPlugin('css/[name].css"htmlcode">

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


运行：


$ webpack
期望

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

运行webpack后的项目的目录结构：
 
生成的 dist/index.html 自动引用了 index.css 和相关的js，由于设置了publicPath 所以相应的链接都采用了绝对路径

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

结果：



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

最后，运行 webpack-dev-server 看一下运行结果：

总结
Webpack将所有静态资源都认为是模块，而通过loader，几乎可以处理所有的静态资源，图片、css、sass之类的。并且通过一些插件如extract-text-webpack-plugin，可以将共用的css抽离出来
下篇介绍改进webpack.config.js：

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

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

            
            上一篇：bootstrapvalidator之API学习教程

            下一篇：jQuery开源组件BootstrapValidator使用详解