webpack学习:配置css,图片,文件,react等

本文内容如下

webpack中的概念和文件结构

如果你都有了答案,可以忽略本文章,或去webpack学习导图寻找更多答案


配置打包html

在上一篇,已经配置过了,内容包括:自动引入JS,修改title,html代码压缩

在这里,再安装clean-webpack-plugin,用于每次打包时删除旧有的打包文件

//安装:
yarn add html-webpack-plugin clean-webpack-plugin

//引入:
const HtmlWebpackPlugin = require('html-webpack-plugin')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')

//配置:
module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    plugins: [
    	new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            template: './index.html',  //指定html模板,以该模板注入打包模块
            title: '代码研习',          //修改html标题,需要配置模板语法<title><%= htmlWebpackPlugin.options.title %></title>
            minify: {                  //html代码压缩
                collapseWhitespace: true,  //移除空格
                removeComments: true       //移除注释
            }
        })
    ]
}


配置打包css

几种配置:

  1. 基本css,样式写入html的style标签中
  2. 使用less或sass
  3. 抽离css到一个单独的文件,使用引用文件的方式加载css
  4. 兼容各种浏览器
  5. 压缩css

依赖:

根据需要安装

css-loader      //处理css
style-loader    //将css加入到html的style标签中
postcss         //postcss-loader的依赖
postcss-loader  //处理浏览器兼容

less            //less依赖
less-loader     //处理less

mini-css-extract-plugin           //抽离css到一个单独的文件,由html-webpack-plugin引入
css-minimizer-webpack-plugin      //css压缩

基本css,样式写入html的style标签中

use: [ ‘style-loader’, ‘css-loader’] 的执行逻辑是 从右往左,先处理css,再将css写入html的style标签中

yarn add -D css-loader style-loader

module: {
        rules: [
            {
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            }
        ]
    },

处理less

yarn add -D less less-loader

module: {
        rules: [
            {
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            }
        ]
},

抽离css到一个单独的文件,使用引用文件的方式加载css

所以,已经不需要style-loader了,使用MiniCssExtractPlugin.loader,替代style-loader,并且配置plugin的输出目录

yarn add -D html-webpack-plugin mini-css-extract-plugin

const { resolve } = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'development',
    entry: './src/index.js',
    output: {
        path: resolve(__dirname, 'dist'),
        filename: 'bundle.js'
    },
    module: {
        rules: [
            {
                test: /\.less$/,
                use: [MiniCssExtractPlugin.loader, 'css-loader', 'less-loader']
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            title: '代码研习',
        }),
        new MiniCssExtractPlugin({
            filename: 'css/[name]-[contenthash:8].css',  //css输出目录
        })
    ]
}

浏览器兼容性处理

loader如果需要配置,可以使用对象的方式

注意: 需要在package.json添加browserslist配置,用于处理浏览器的规则

yarn add -D postcss postcss-loader

module: {
        rules: [
            {
                test: /\.less$/,
                use: [
                    MiniCssExtractPlugin.loader,
                    'css-loader',
                    {
                        loader: 'postcss-loader',
                        options: {
                            postcssOptions: { plugins: ['postcss-preset-env'] }
                        }
                    },
                    'less-loader']
            }
        ]
    },


//package.json
"browserslist": {
    "development": [
      "last 1 chrome version",
      "last 1 firefox version",
      "last 1 safari version"
    ],
    "production": [     //生产环境:默认开启生产环境
      ">0.01%",         //兼容大多数浏览器
      "not dead",       //不要死了的浏览器
      "not op_mini all" //不要open浏览器
    ]
},

压缩css

css的代码将以一行的方式呈现,节约文件大小,以便获取更快的加载速度

yarn add -D css-minimizer-webpack-plugin

const CssMinimizer= require('css-minimizer-webpack-plugin')
plugins: [ new CssMinimizer() ]

配置打包images

在这里插入代码片

配置打包react | vue

在这里插入代码片

配置打包typescript

在这里插入代码片

总结:


学习更多

webpack学习导图

上一篇:webpack处理css以及less


下一篇:观察者模式实现图片预加载,并开放事件监听接口