首页 > 其他分享> 文章详细

webpack学习：配置css，图片，文件，react等

2021-10-30 20:36:21 阅读：210 来源： 互联网

标签：plugin less loader react webpack html css

本文内容如下

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

几种配置：

基本css，样式写入html的style标签中
使用less或sass
抽离css到一个单独的文件，使用引用文件的方式加载css
兼容各种浏览器
压缩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学习导图

标签：plugin,less,loader,react,webpack,html,css
来源： https://blog.csdn.net/weixin_44828005/article/details/121054484