webpack3之处理css文件

目录结构

目录结构

• 将css直接打包进页面的style标签内

安装模块

npm install webpack style-loader precss postcss-loader css-loader autoprefixer --save

相关文件

//====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引用

• 将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 引用

• 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自己去做这件事儿

扩展阅读

• html-webpack-plugin插件使用方法
• webpack之处理图片