前端项目搭建部署全流程：webpack配置

Posted 2021-03-30 码农的小辛运

1.前言

上一篇文章已经简单的配置了一些webpack的配置，这一篇文件主要是基于项目增加一些loader的处理，后续根据实际使用情况在继续更新配置

2.webpack CSS配置

2.1.安装依赖

yarn add css-loader style-loader --dev

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样

style-loader把 CSS 插入到 DOM 中

2.2.webpack配置

module: {
    rules: [
        ...
        {
            test: /\.css$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true, // 启用css modules
                    },
                },
            ],
        },
    ],
},

3.webpack sass less配置

3.1.安装依赖

yarn add less less-loader node-sass sass-loader--dev

less是一个Css 预编译器

less-loaderwebpack 将 Less 编译为 CSS 的 loader

node-sass是一种预处理器脚本语言，可以解释或编译成层叠样式表（CSS）

sass-loader加载 Sass/SCSS 文件并将他们编译为 CSS

3.2.webpack配置

module: {
    rules: [
        ...
        {
            test: /\.sass$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: {
                            localIdentName: '[hash:base64:6]',
                        },
                    },
                },
                { loader: 'sass-loader' },
            ],
        },
        {
            test: /\.less$/,
            use: [
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: {
                            localIdentName: '[hash:base64:6]',
                        },
                    },
                },
                { loader: 'less-loader' },
            ],
        },
    ],
},

3.3.node-saas单独安装

npm i node-sass --sass_binary_site=https://npm.taobao.org/mirrors/node-sass/

4.webpack 静态资源配置

4.1.安装依赖

yarn add file-loader url-loader --dev

file-loader指示webpack发出所需的对象作为文件并返回其公共URL

url-loader将文件作为base64编码的URL加载

4.2.webpack配置

module: {
    rules: [
        ...
        {
            test: /\.(jep?g|png|gif)$/,
            use: {
                loader: 'file-loader',
                options: {
                    name: 'img/[name].[ext]',
                },
            },
        },
        {
            test: /woff|ttf|eot|svg|otf/,
            use: {
                loader: 'file-loader',
            },
        },
        {
            test: /\.jpe?g|png|gif/, // 图片在范围内使用url-loader处理，转化成base64，范围外使用file-loader处理
            use: {
                loader: 'url-loader',
                options: {
                    limit: 100 * 1024,
                    name: `img/[name].[ext]`,
                },
            },
        },
    ],
},

5.webpack plugin配置

5.1.安装插件

yarn add mini-css-extract-plugin optimize-css-assets-webpack-plugin uglifyjs-webpack-plugin --dev

5.2.mini-css-extract-plugin

mini-css-extract-plugin本插件会将 CSS 提取到单独的文件中，为每个包含 CSS 的 JS 文件创建一个 CSS 文件，并且支持 CSS 和 SourceMaps 的按需加载

plugins: [
    new MiniCssPlugin({
        filename: 'css/[name].css',
    }),
],
module: {
    rules: [
        ...
        {
            test: /\.css$/,
            use: [
                MiniCssPlugin.loader,
                { loader: 'style-loader' },
                {
                    loader: 'css-loader',
                    options: {
                        modules: true, // 启用css modules
                    },
                },
            ],
        },
    ],
},

5.3.optimize-css-assets-webpack-plugin

optimize-css-assets-webpack-plugin用于优化或者压缩CSS资源

• assetNameRegExp: 正则表达式，用于匹配需要优化或者压缩的资源名。默认值是 /\.css$/g

• cssProcessor: 用于压缩和优化CSS 的处理器，默认是 cssnano.这是一个函数，应该按照 cssnano.process 接口(接受一个CSS和options参数，返回一个Promise)

• canPrint: {bool} 表示插件能够在console中打印信息，默认值是true

optimization: {
    minimizer: [
        new OptimizeCssAssetsPlugin({
            assetNameRegExp: /\.css$/g,
            cssProcessor: require('cssnano'),
            cssProcessorOptions: { safe: true, discardComments: { removeAll: true } },
            canPrint: true,
        }),
    ],
},

5.4.uglifyjs-webpack-plugin

uglifyjs-webpack-plugin此插件使用 uglify-js 压缩你的 javascript

optimization: {
        new UglifyjsPlugin({
            uglifyOptions: {
                output: {
                    beautify: false, // 不格式化
                    comments: false, // 不保留注释
                },
                compress: {
                    drop_console: true, // 去除打印语句
                },
            },
        }),
    ],
},

第一次记录写文章，文笔有限，多多包涵，ヾ(´ー`)ﾉ゛谢谢♪