webpack学习笔记-5-extract-text-webpack-plugin
2017-06-28 21:24
691 查看
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/
4000
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
前面提到过,为了让打包后样式生效,有两种方法,一种是使用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/
4000
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
相关文章推荐
- extract-text-webpack-plugin插件提取css单独打包
- Webpack安装extract-text-webpack-plugin遇见的两个问题
- 详解extract-text-webpack-plugin 的使用及安装
- extract-text-webpack-plugin 的使用及安装
- 使用webpack2和extract-text-webpack-plugin时遇到Chunk.entry was removed. Use hasRuntime()错误的解决方法
- Webpack 常见静态资源处理 - 模块加载器(Loaders)+ExtractTextPlugin插件
- extract-text-webpack-plugin 的使用及安装
- webpack extract-text-webpack-plugin
- 用extract-text-webpack-plugin提取出来的css文件中背景图片url的不正确的问题
- webpack学习(四)extract-text-webpack-plugin插件
- Webpack2/3配置ExtractTextPlugin和Autoprefixer
- extract-text-webpack-plugin 作用、安装、使用
- extract-text-webpack-plugin" loader is used without the corresponding plugin How to deal
- extract-text-webpack-plugin 的安装及配置
- webpack "extract-text-webpack-plugin" 打包报错loader is used without the corresponding plugin
- webpack4升级extract-text-webpack-plugin和UglifyJsPlugin问题
- vue-cli 新创建的项目启动报错 Module build failed: Error: "extract-text-webpack-plugin"
- 【Issues-Webpack-N1】extract-text-webpack-plugin使用css-loader报错
- extract-text-webpack-plugin
- webpack3最新版本配置研究(三)多入口,html-webpack-plugin, extract-text-webpack-plugin