目錄結構
目錄結構
- 將css直接打包進頁面的style標簽內
安裝模塊
npm install webpack style-loader precss postcss-loader css-loader autoprefixer file-loader url-loader --save
- 其中 file-loader url-loader兩個模塊是圖片處理的必要模塊
相關文件
//====app.js
require('./styles/index.css');
console.log("你好我是app.js");
//====css文件
body{
padding: 0px;
margin:0px;
background-color: #f8f8f8;
}
配置文件（webpack.config.js）
//引用webpack
var webpack=require('webpack');
//postcss-loader 需要的配置項
var precss = require('precss');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
app:'./src/app.js'//頁面入口文件請參照目錄結構
},
output: {
path: './build',//輸出目錄
filename: 'js/[name].js'//入口文件生成的對應js的文件名最終生成結果build/js/app.js
},
module: {
loaders: [
// 編譯css并自動添加css前綴
{ test: /\.css$/, loader: 'style!css!postcss-loader'}
]
},
postcss: function () {
return [precss, autoprefixer];
}
}
HTML引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>處理css</title>
<script type="text/javascript" src="build/js/app.js"></script>
<body>
</body>
</html>
- 將CSS文件提取出來
一般我們都不會把大段的css放進頁面中晶衷，會將其放在獨立的文件中垦缅，然后在我們的頁面中引用，那么如何用webpack 將css打包出來呢？
安裝模塊
npm install extract-text-webpack-plugin --save
相關文件
//====app.js
require('./styles/index.css');
require('./styles/base.less');
console.log("你好我是app.js");
//====index.css文件
body{
padding: 0px;
margin:0px;
background-color: #f8f8f8;
}
//====base.less
@colorFF:#666;
body{
color: @colorFF;
}
配置文件
var webpack=require('webpack');
//css文件提取器需要的模塊
var ExtractTextPlugin=require('extract-text-webpack-plugin');
//postcss-loader 需要的配置項
var precss = require('precss');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
app:'./src/app.js'
},
output: {
path: './build',
filename: 'js/[name].js'
},
module: {
loaders: [
// 編譯css并自動添加css前綴 并將css提取出來
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader')}
]
},
postcss: function () {
return [precss, autoprefixer];
},
plugins:[
//提取之后生成的css文件名字 （bulid/css/app.css）
new ExtractTextPlugin('css/app.css'),
]
}
html 引用
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>處理css</title>
<script type="text/javascript" src="build/js/app.js"></script>
<link rel="stylesheet" type="text/css" href="build/css/app.css">
<body>
</body>
</html>
- less文件
有時候我們用的是less文件呢哎垦？可不可以處理呢？答案是可以的
安裝模塊
npm install less less-loader --save
加入處理less文件的配置項
{ test: /\.less$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader!less')}
加入處理less文件操作之后的配置文件
var webpack=require('webpack');
//css文件提取器需要的配置項
var ExtractTextPlugin=require('extract-text-webpack-plugin');
//postcss-loader 需要的配置項
var precss = require('precss');
var autoprefixer = require('autoprefixer');
module.exports = {
entry: {
app:'./src/app.js'
},
output: {
path: './build',
filename: 'js/[name].js'
},
module: {
loaders: [
// 編譯css并自動添加css前綴 并將css提取
{ test: /\.css$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader')},
//匹配less文件统屈，給less文件制定特定的處理器（loader）
{ test: /\.less$/, loader: ExtractTextPlugin.extract('style','css!postcss-loader!less')}
]
},
postcss: function () {
return [precss, autoprefixer];
},
plugins:[
new ExtractTextPlugin('css/app.css'),
]
}
- 給生成的css文件加上哈希戳驱证，避免緩存
plugins:[
new ExtractTextPlugin('css/app[hash].css'),
]
//最終生成的名字示例
app0826949eab730ccc2f61.css
此時生成的文件名和index.html中引用的文件名不一致，需要自己手動改index.html文件【如果結合html-webpack-plugin】插件就可以讓這個引用（link標簽）由webpack自己去做這件事兒
