webpack配置插件項

這篇博客是記了一個關於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全家桶