webpack4.0 基础配置3(css)

1. 安装常见css预处理器的loader

npm install css-loader style-loader less less-loader autoprefixer postcss-loader --save-dev
注意：
1）autoprefixer postcss-loader 为兼容配置
2) 配置sacc的话：sass node-sass sass-loader

// 配置webpack加载器(loader)
    module: {
        // 设置规则和处理方案 默认执行顺序：从右到左，从下到上
        rules: [
            {
                test: /\.(css|less)$/i,
                use: [
                    "style-loader", // 把处理好的css插入到页面中（通过内嵌式）
                    "css-loader", // 处理 @import/url 这种语法
                    "postcss-loader", // 设置css前缀(处理兼容 需要搭配autoperfixer一起使用，需要额外配置一些信息，在根目录下新建postcss.config.js文件进行配置)
                    "less-loader" // 将less => css（一定是最底下的，它是基础）

                    // 补充：
                    /*
                        1. 加载器还可以进行具体配置
                        {
                            loader: 'less-loader',
                            options: {
                                ...
                            }
                        }

                        2. 自己指定要兼容哪些浏览器 ( https://github.com/browserslist/browserslist)
                        在 package.json 文件中添加 browserslist.
                        {
                            "browserslist": [
                                ">1%",  // 表示要兼容 99% 的浏览器
                                "last 2 versions" // 兼容浏览器最近的2个版本
                            ]
                        }
                    */
                ]
            }
        ]
    }

用 style-loader style 是内嵌式的（<script>...</script>）,要抽离css，以 link外链的方式进行导入时，需要用到 mini-css-extract-plugin插件。

const MiniCssExtractPlugin = require('mini-css-extract-plugin');
module.exports = {
	// 配置webpack的插件
    plugins: [
        // 用 MiniCssExtractPlugin 抽离css到单独的文件中，style-loader应该被换为 MiniCssExtractPlugin.loader
        new MiniCssExtractPlugin({
            filename: '[name].[hash].min.css'  // 导出的css文件名
        })
    ],
    // 配置webpack加载器(loader)
    module: {
        // 设置规则和处理方案 默认执行顺序：从右到左，从下到上
        rules: [
            {
                test: /\.(css|less)$/i,
                use: [
                    // "style-loader", // 把处理好的css插入到页面中（通过内嵌式）
                    MiniCssExtractPlugin.loader,
                    "css-loader",
                    "postcss-loader",
                    "less-loader"
                ]
            }
        ]
    }
}

2. 优化项配置

css压缩

安装npm install optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin terser-webpack-plugin --save-dev

const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-plugin');
const TerserWebpackPlugin = require('terser-webpack-plugin');
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');

module.exports = {
	// 配置webpack的优化项
optimization: {
        // 配置压缩方式
        minimize: true, // 需要添加这个属性，否则可能无法压缩，可能是因为webpack版本的问题。
        minimizer: [
            // 压缩css（但是必须指定js的压缩方式）
            new OptimizeCssAssetsWebpackPlugin(),
            // 压缩js
            // new UglifyjsWebpackPlugin({
            //     cache: true, // 是否使用缓存
            //     parallel: true, // 是否是并发编译
            //     sourceMap: true // 启动源码映射（方便调试）
            // }),
            // 压缩js
            new TerserWebpackPlugin()
        ]
    },

图片

npm install file-loader url-loader html-withimg-loader --save-dev
html-withimg-loader 这个是处理 html 中的 图片。
file-loader、 url-loader 是处理 css / js 中的 图片。
注意：若 图片是 url-loader 处理的，当不满足limit条件时，会自动用file-loader处理。

真实项目中的图片

1. css中设置背景图片
2. js中动态创建图片
3. html中直接写图片

// 配置webpack加载器(loader)
    module: {
        // 设置规则和处理方案 默认执行顺序：从右到左，从下到上
        rules: [
            {
                // 图片处理
                test: /\.(png|jpe?g|gif|ico|bmp)$/i,
                // use: "file-loader" // 或 ["file-loader"]
                use: [{
                    // url-loader在编译的时候，会把符合条件的图片进行base64，对不符合条件的还是继续使用
                    // file-loader处理。
                    loader: 'url-loader',
                    options: {
                        limit: 1 * 1024, // 若小于这个范围内的，均转为base64
                        // outputPath: './images', // 在编译的时候，把图片都放在统一的images文件夹下
                        name: 'images/[name].[hash].[ext]', // 直接将生成的图片放入 images 中。
                        // esModule: false, // 在 html中 添加图片时，要设置。
                    }
                }]
            },
            {
                // 字体图标的处理 file-loader 就是编译图片的加载器
                test: /\.(svg|eot|ttf|woff|woff2)$/i,
                use: [{
                    loader: 'file-loader',
                    options: {
                        // 不适用base64
                        name: 'images/[name].[hash].[ext]'
                    }
                }]
            },{
                // 处理html页面中的图片 html-withimg-loader
                test: /\.html$/,
                use: ['html-withimg-loader']
            }
        ]
    }

// 在 js 中动态创建图片
// 1. 如果地址是一个外网的绝对地址，直接使用即可（编译后地址还是外网）
// 2. 如果需要设置的是相对地址，则需要基于require把图片导入进来在使用，否则找不到地址

let image = new Image();
image.src = require('./static/image/img.png');
document.body.appendChild(image)

JS

将 es6 转为 es5 ，兼容其他浏览器

1. npm install babel-loader @babel/core @babel/preset-env --save-dev
   babel-loader：用于语法转换, 它是依赖于 @babel/core @babel/preset-env 。
2. npm install @babel/runtime @babel/polyfill // 安装到生产环境下
   npm install @babel/plugin-proposal-class-properties @babel/plugin-proposal-decorators @babel/plugin-transform-runtime --save-dev
   @babel/polyfill 向下兼容，它必须与 @babel/runtime 和 @babel/plugin-transform-runtime 一起使用。
3. 语法检测
   npm install eslint exlint-loader --save-dev

module.exports = {
	module: {
        // 设置规则和处理方案 默认执行顺序：从右到左，从下到上
        rules: [
        	{
                test: /\.js$/i,
                use: [{
                    loader: 'babel-loader',
                    options: {
                        // 指定语法包，转换语法
                        presets: [
                            "@babel/preset-env" // es6 -> es5
                        ],
                        // 基于插件处理es6和es7中的class特色语法
                        plugins: [
                            // 处理类的装饰器
                            [
                                "@babel/plugin-proposal-decorators",{
                                    "legacy": true
                                }
                            ],
                            // 类中设置属性
                            [
                                "@babel/plugin-proposal-class-properties",{
                                    "loose": true
                                }
                            ],
                            [
                                "@babel/plugin-transform-runtime"
                            ]
                        ]
                    }
                },
                // 'eslint-loader'
            ],
                include: path.resolve(__dirname,'src'),
                exclude: /node_modules/
            }
		]
	}
}