webpack学习笔记-5-extract-text-webpack-plugin
来源:互联网 发布:mac cocos2dx lua 编辑:程序博客网 时间:2024/05/23 23:39
1.背景
前面提到过,为了让打包后样式生效,有两种方法,一种是使用style-loader自动将css代码放到生成的style标签中插入到head标签里。另一种就是这篇文章要介绍的,使用extract-text-webpack-plugin插件,将样式文件单独打包,打包输出的文件由配置文件中的output属性指定。然后我们在入口HTML页面写个link标签引入这个打包后的样式文件。
2.插件
关于webpack的插件,在《入门webpack》里有较详细的解释,个人理解插件和loader类似都是文件处理程序,但和loader不同,它不是针对特定类型文件的处理程序,而是在打包的整个过程这个更大的维度上起作用的处理程序。比如,js压缩插件UglifyJsPlugin就是把打包后的js代码进行压缩。还有这篇文章要介绍的插件extract-text-webpack-plugin是把样式文件单独打包。
3.文档:https://www.npmjs.com/package/extract-text-webpack-plugin
文档中提到了将样式文件打包成一个文件和将不同类型的样式文件打包输出成两个样式文件这两个功能。
下面用两个demo演示这两个功能。
4.demo1 将样式文件打包成一个文件
// webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');module.exports = { // 入口文件路径,__dirname是根目录 entry: __dirname + '/src/main.js', // 打包生成文件 output: { path: __dirname + '/output', filename: 'main.js' }, module: { rules: [ { test: /\.less$/, use: ExtractTextPlugin.extract({ fallback: 'style-loader', use: [ 'css-loader', 'autoprefixer-loader', 'less-loader' ] }) }, { test: /\.jpeg$/, // use: 'url-loader?limit=1024&name=[path][name].[ext]&publicPath=output/', use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=./', }, ] }, plugins: [ new ExtractTextPlugin('main.css') ]}需要注意的是,由于我们是将样式文件单独打包,所以图片的引用是相对于css文件的。因此要修改url-loader的参数,把publicPath改为‘./’。
相应的,index.html文件也要引入打包的样式文件。
<!DOCTYPE html><html><head> <title>webpack-demo</title> <script type="text/javascript" src="./output/main.js"></script> <link rel="stylesheet" type="text/css" href="./output/main.css"></head><body > <div id="container"> <div class="button"> 点击弹出问候 </div> </div></body><script type="text/javascript"> var btnElement = document.getElementsByClassName('button')[0]; bindButtonElementEvent(btnElement);</script></html>demo1地址:https://github.com/KIDFUCKER/webpack-demo.git
分支:v6-ExtractTextPlugin
5.demo2
假设项目中有css和less两种样式文件,我们希望可以把这两种样式文件分别打包。
// webpack.config.js
var ExtractTextPlugin = require('extract-text-webpack-plugin');// 生成两个实例,参数是生成文件的相对路径var extractCss = new ExtractTextPlugin('[name]-one.css');var extractLess = new ExtractTextPlugin('[name]-two.css');module.exports = { // 入口文件路径,__dirname是根目录 entry: __dirname + '/src/main.js', // 打包生成文件 output: { path: __dirname + '/output', filename: 'main.js' }, module: { rules: [ { test: /\.css/, use: extractCss.extract({ fallback: 'style-loader', use: [ 'css-loader', 'autoprefixer-loader' ] }) }, { test: /\.less$/, use: extractLess.extract({ fallback: 'style-loader', use: [ 'css-loader', 'autoprefixer-loader', 'less-loader' ] }) }, { test: /\.jpeg$/, // use: 'url-loader?limit=1024&name=[path][name].[ext]&publicPath=output/', use: 'url-loader?limit=1024&name=[path][name].[ext]&outputPath=img/&publicPath=./', }, ] }, plugins: [ extractCss, extractLess ]}demo2地址:https://github.com/KIDFUCKER/webpack-demo.git
分支: v7-ExtractTextPlugin
- webpack学习笔记-5-extract-text-webpack-plugin
- Webpack安装extract-text-webpack-plugin遇见的两个问题
- extract-text-webpack-plugin 的使用及安装
- extract-text-webpack-plugin 的安装及配置
- extract-text-webpack-plugin 的使用及安装
- extract-text-webpack-plugin插件提取css单独打包
- extract-text-webpack-plugin配置出错的解决办法
- webpack "extract-text-webpack-plugin" 打包报错loader is used without the corresponding plugin
- webpack3最新版本配置研究(三)多入口,html-webpack-plugin, extract-text-webpack-plugin
- webpack3最新版本配置研究(二)多入口,html-webpack-plugin, extract-text-webpack-plugin
- webpack---编译sass并分割css为独立文件,通过extract-text-webpack-plugin分割文件
- 【Issues-Webpack-N1】extract-text-webpack-plugin使用css-loader报错
- extract-text-webpack-plugin" loader is used without the corresponding plugin How to deal
- 使用webpack2和extract-text-webpack-plugin时遇到Chunk.entry was removed. Use hasRuntime()错误的解决方法
- 使用webpack2和extract-text-webpack-plugin时遇到Chunk.entry was removed. Use hasRuntime()错误的解决方法
- webpack plugin
- webpack学习笔记
- webpack学习笔记
- 05_MyEclipse中部署Tomcat
- 中文搜索乱码
- bzoj1860: [Zjoi2006]Mahjong麻将
- SSL1333 地鼠的困境
- POJ 3083 (bfs + dfs)
- webpack学习笔记-5-extract-text-webpack-plugin
- 基因组信息学参考习题
- bot framework2——与用户交互
- 如何在安卓中使用线程池(ThreadPoolExecutor)
- java用递归删除目录
- git查看远程仓库信息
- Playgrounds配件Parrot Education的深入发掘(一)
- LeetCode_linked-list-cycle-ii
- mysql语法