webpack4打包样式篇(less/sass/css)

webpack4打包样式篇(上)

​ 我们都知道webpack是模块打包机，他可以打包不同类型的文件，但是对于非js得文件，我们需要借助一些loader来帮助我们打包，这一小节主要介绍借助一些样式loader帮助我们打包一些.css，.less，.sass文件

其中涉及到的loader有：

• style-loader
• css-loader
• less-loader
• postcss-loader

loader	作用
style-loader	会把之前css-loader解析的css内容挂载到head部分得style标签中
css-loader	会分析不同css文件之间的依赖关系并合并成一个css文件
postcss-loader	可以帮助我们自动给那些可以添加厂商前缀的样式添加厂商前缀-webkit -moz -ms -o
less-loader	把less文件里面样式转化成css样式

loader的解析是从右往左，从下到上

其中涉及到得plugin有：

• html-webpack-plugin
• clean-webpack-plugin
• webpackbar

plugin	作用	作用时间
html-webpack-plugin	会在打包之后自动生成一个html文件，并且自动插入打包后的js文件，可以选择性的配置模板文件	打包之后
clean-webpack-plugin	会在打包之前自动清除上一次的打包结果，不用手动再去删除	打包之前
webpackbar	打包的时候控制台的打包进度条	打包中

plugin使我们的打包更加便捷高效

那废话就不多说啦直接开始写代码！

1. 首先需要一个index.js

import './css/index.css'

2. 需要一个css文件夹，里面有index.css和less.less

// index.css
@import './less.less';
.webpack {
     
    color: yellow;
    font-size: 30px;
    font-weight: 700;
}

// less.less
body {
     
    background-color: palevioletred;
}

3. 配置webpack.config.dev.js

const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const {
      CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackbar = require('webpackbar');
module.exports = {
     
    mode: 'development',
    entry: {
     
        main: './src/index.js'
    },
    output: {
     
        filename: '[name]_[hash:8].js',
        path: path.resolve(__dirname,'../build')
    },
    plugins:[
        new HtmlWebpackPlugin({
     
             filename: 'index.html',
             template: './src/index.html'
        }),
       new CleanWebpackPlugin(),
       new webpackbar({
     color:'purple'})
    ],
    module: {
     
        rules:[
            {
     
                test:/\.css$/,
                use: [
                    "style-loader",
                    'css-loader',
                    'less-loader'
                ]
            }
        ]
    }
}

4. package.json

 "scripts": {
     
        "build:dev": "webpack --config ./config/webpack.config.dev.js",
  },

5. 运行npm run build:dev打包出build文件，运行打包后的html
   

6. 有些样式我们需要添加厂商前缀，才能兼容不同的浏览器，使用postcss-loader和autoprefixer解决这个问题

// index.css
@import './less.less';
.webpack {
     
    color: yellowgreen;
    font-size: 30px;
    font-weight: 700;
    // 这个属性是需要加上厂商前缀的
    transform: rotate(-45deg);
}

// less.less
body {
     
    background-color: palevioletred;
}

// webpack.config.dev.js
module: {
     
        rules:[
            {
     
                test:/\.css$/,
                use: [
                    "style-loader",
                    'css-loader',
                    'postcss-loader',
                    'less-loader'
                ]
            }
        ]
}

// postcss.config.js
module.exports = ({
      env }) => ({
     
    plugins: [
         require('autoprefixer'),
        //  env === 'production' ? require('cssnano') : null
      ]
 })

如下图所示，没有添加postcss-loader和autoprefixer之前，transform: rotate(-45deg)前缀是没有的：

如下图所示，添加postcss-loader和autoprefixer之后，transform: rotate(-45deg)厂商前缀被添加上了：

注意事项

使用插件clean-webpack-plugin可能出现的报错以及解决方法

报错：TypeError: CleanWebpackPlugin is not a constructor

解决方法：

// 之前的写法
const CleanWebpackPlugin = require("clean-webpack-plugin");
plugins:[
 	new CleanWebpackPlugin(['build']),   
]

// 现在最新的写法
const {
      CleanWebpackPlugin } = require("clean-webpack-plugin");
plugins:[
 	new CleanWebpackPlugin(),   
]

webpack总配置如下：

// webpack.config.dev.js
const path = require('path');
const HtmlWebpackPlugin  = require('html-webpack-plugin');
const {
      CleanWebpackPlugin } = require('clean-webpack-plugin');
const webpackbar = require('webpackbar');
module.exports = {
     
    mode: 'development',
    entry: {
     
        // 这个入口路径写法
        // 一：直接写绝对路径：path.resolve(__dirname,'../src/index.js')
        // 二：写相对路径：这个路径是package.json运行脚本相对于入口文件index.js的地址，意思就是说不管你这个webpack.config,dev.js文件是放在哪个文件下或者是层级多么深，这个地址都是index.js相对package.json的位置
        main: './src/index.js'
    },
    output: {
     
        filename: '[name]_[hash:8].js',
        path: path.resolve(__dirname,'../build')
    },
    plugins:[
        new HtmlWebpackPlugin({
     
            filename: 'index.html',
            // 这个引用模板的路径写法
            // 一：直接写绝对路径：path.resolve(__dirname,'../src/index.js')
            // 二：写相对路径：这个路径是package.json运行脚本相对于入口文件index.js的地址，意思就是说不管你这个webpack.config,dev.js文件是放在哪个文件下或者是层级多么深，这个地址都是index.js相对package.json的位置
            template: './src/index.html'
        }),
        new CleanWebpackPlugin(),
        new webpackbar({
     color:'purple'})
    ],
    module: {
     
        rules:[
            {
     
                test:/\.css$/,
                use: [
                    "style-loader",
                    'css-loader',
                    // 使用这个需要配合postcss.config.js里面的autoprefixer使用
                    'postcss-loader',
                    // 如果使用sass那么这里就是sass-loader,并且安装sass相关的loader即可
                    'less-loader'
                ]
            }
        ]
    }
}

// postcss.config.js
module.exports = ({
      env }) => ({
     
    plugins: [
         require('autoprefixer'),
        //  env === 'production' ? require('cssnano') : null
      ]
 })

以上的配置是把打包的样式放到了style标签里面，如果我们想单独抽离css文件那又该怎么配置我们得webpack呢？ webpack4样式篇(下)我会重点讲一讲如何抽离css并压缩css