webpack4.0 基础配置3(css)

2021-04-12 23:05:42 阅读：187 来源： 互联网

标签：plugin babel 配置 loader webpack html webpack4.0 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处理。

真实项目中的图片

css中设置背景图片
js中动态创建图片
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 ，兼容其他浏览器

npm install babel-loader @babel/core @babel/preset-env --save-dev
babel-loader：用于语法转换, 它是依赖于 @babel/core @babel/preset-env 。
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 一起使用。
语法检测
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/
            }
		]
	}
}

标签：plugin,babel,配置,loader,webpack,html,webpack4.0,css
来源： https://blog.csdn.net/qq_42387542/article/details/115609184

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。

ICode9

webpack4.0 基础配置3(css)

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

2. 优化项配置

css压缩

图片

JS