目录结构
目录结构
- 将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自己去做这件事儿
