欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

webpack配置插件项

程序员文章站 2022-07-12 19:54:00
...

这篇博客是记了一个关于webpack的笔记

postcss-loader

首先postcss-loader 和 postcss-cssnext 是关于css自动补充前缀的一个插件,
webpack 里面rules配置use: [‘style-loader’, ‘css-loader’, ‘postcss-loader’]
项目根目录创建一个postcss.config.js 文件,

module.exports = {
    plugins: {
        'postcss-cssnext': {}
    }
};

HtmlWebpackPlugin

	const HtmlWebpackPlugin = require('html-webpack-plugin');

	plugins: [
	    new HtmlWebpackPlugin({
	        filename: 'index.html',
	        template: path.join(__dirname, '../public/index.html')
	    })
	]

我们每次启动都会使用这个html-webpack-plugin,webpack会自动将打包好的JS注入到这个index.html模板里面

CSS Modules优化

CSS的规则都是全局的,任何一个组件的样式规则,都对整个页面有效。产生局部作用域的唯一方法,就是使用一个独一无二的class的名字,不会与其他选择器重名。这就是 CSS Modules 的做法。

	{
	    loader:'css-loader',
	    options: {
	        modules: true,
	        localIdentName: '[local]--[hash:base64:5]'
	    }
	}

接着我们在引入css的时候,可以使用对象.属性的形式。(这里有中划线,使用[属性名]的方式)

import style from './index.css';

<div className={style["page-box"]}>
    this is Page~
</div>

图片优化

{
    test: /\.(png|jpg|gif)$/,
    use: [{
        loader: 'url-loader',
        options: {
            limit: 8192
        }
    }]
}

images: path.join(__dirname, '../src/images'),

options limit 8192意思是,小于等于8K的图片会被转成base64编码,直接插入HTML中,减少HTTP请求。

如何搭建一个REACT全家桶

相关标签: webpack