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全家桶