webpack基础配置（上）

Danny509
164 阅读4分钟

一、自定义webpack配置页

webpack在yarn init -y 初始化项目之后默认识别配置文件名是webpack.config.js，如果想要自定义webpack配置页，可以在package.json中进行配置
--config指定自定义webpack的页面路径

"scripts": {
  "build": "webpack --config mywebpack.js"
},

二、 入口文件的配置

入口文件即将谁进行打包

entry: './src/index.js',

三、出口文件的配置

出口文件即将入口文件打包到哪里
__dirname：当前文件所在的完整路径

output: {
    filename: 'main.js',  //打包的文件名
    path: path.resolve(__dirname, 'dist'), //打包到具体路径文件夹
    clean: true, // 在生成文件之前清空 output 目录
},

四. loader加载器

作用：对特定的模块类型进行转换
加载执行顺序：从右往左，从下往上执行。
css-loader: 识别css
style-loader: 将处理好的css添加到页面的style标签，使得页面css生效
less-loader: 需要安装less和less-loader, 转换为css
postcss-loader: css转换

1. 工程化

兼容性： css js；
兼容哪些平台： 市场占有率作为兼容条件；浏览器市场占有率caniuse.com网站可以查看,
如何兼容: postcss-loader, postcss-preset-env等

browserslistrc工作流程：
（1） package.json新增一条：

"browserslist": [
  ">1%", // 兼容市场占有率大于1的平台
  "last 2 version", // 最新两个版本
  "not dead" // 没有死掉的平台
]

（2）新增配置文件.browserslistrc进行兼容性配置: 用空格或者用and连接配置项

>1%
last 2 version
not dead

兼容化处理：
postcss：javascript转换样式的工具
1)通过命令行方式处理css文件
安装依赖：yarn add postcss-cli postcss -D
安装添加前缀插件: autoprefixer
2）通过webpack配置postcss-loader实现兼容性配置(推荐此方式)
安装依赖：yarn add postcss postcss-preset-env -D
插件：postcss-preset-env集合很多css插件的功能集合，包括浏览器前缀，css样式转换为rgba等...

使用方法： 新建postcss.config.js配置文件进行postcss-loader配置项管理

module.exports={
    plugins: [
        require('postcss-preset-env'),
        // require('autoprefixer')
    ]
}

webpack配置文件中引入postcss-loader处理兼容性

module: {
    rules: [
        {
            test: /\.css$/,
            use: ['style-loader','css-loader','postcss-loader'], // postcss-loader处理兼容性后交给css-loader处理
        },
        {
            test: /\.less$/,
            use: ['style-loader','css-loader', 'postcss-loader', 'less-loader'],
        }
    ],
},

2. importLoaders属性

css通过@import引入到其他css文件中，执行到css-loader后不会回退到postcss-loader对被引入的css进行兼容性处理，这时候需要使用importLoasders属性来执行，实现css-loader加载到引入文件时候回退1步/n步去执行其他加载器。

{
    test: /\.css$/,
    use: [
    'style-loader',
        {
            loader: 'css-loader',
            options: {
                importLoaders: 1, // 遇到import引入回退一步执行postcss-loader, 0的话继续执行不发生变化
            },
        },
        'postcss-loader'
        ],
},

3. 图片打包

(1) file-loadeer

img src 三种引入图片方式：
1)使用require方式导入图片，如果此时不配置esModule:false, 则需要.default导出
2)使用require方式导入图片，在配置当中设置esModule:false。<br**/>** 3)采用import xxxx from 图片资源，此时可以直接使用xxx

{
    test: /\.(png|svg|gif|jpe?g)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                esModule: false // 不转为 esModule
            },
        }
    ]
}

背景图片:
css-loader可以解析import,url...,背景图片中url会被识别为require, require新版本返回的是一个esModule对象从而引入图片失败，在css-loader里面增加esModule: false，直接引入图片资源不转化为require。

{
    loader: 'css-loader',
    options: {
        importLoaders: 1,
        esModule: false,
    },
},

自定义打包图片名称和路径:

image.png

{
    test: /\.(png|svg|gif|jpe?g)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: '[name].[hash:6].[ext]',
                outputPath: 'img'
            },
        }
    ]
}

或者path写在name属性里

{
    test: /\.(png|svg|gif|jpe?g)$/,
    use: [
        {
            loader: 'file-loader',
            options: {
                name: 'img/[name].[hash:6].[ext]',
            },
        }
    ]
}

(2) url-loader

使用方法同上file-loader
limit属性：指定大小以下去使用url-loader方式(即base64 data编码方式)
url-loader和file-loader区别：
1）url-loader: 直接在网页上生成base64 url，
优点：减少请求次数；
缺点：对于文件比较大的时间比较长，
2）file-loader：将静态资源拷贝到指定目录

{
    test: /\.(png|svg|gif|jpe?g)$/,
    use: [
        {
            loader: 'url-loader',
            options: {
                name: 'img/[name].[hash:6].[ext]',
                limit: 52 * 1024, //52kb以下使用base64方式,以上使用资源拷贝方式
            },
        }
    ]
}

(3）asset处理图片（推荐）

webpack5之后不需要使用file-loader url-loader等进行打包图片，使用asset进行图片打包。
拷贝静态资源到本地调用，作用同file-loader

{
    test: /\.(png|svg|gif|jpe?g)$/,
    type: 'asset/resource', // 拷贝资源文件
    generator: {
        filename: 'img/[name].[hash:6][ext]' // 拷贝的资源文件到具体路径
    },
}

打包为base64 dataurl直接显示在网页,作用和url-loader一样

{
    test: /\.(png|svg|gif|jpe?g)$/,
    type: 'asset/inline', // base64资源添加到代码里
}

推荐统一配置：指定xxxkb大小以下使用base64方式显示，超过这个大小打包到本地目录为静态资源

{
    test: /\.(png|svg|gif|jpe?g)$/,
    type: 'asset',
    generator: {
        filename:  'img/[name].[hash:6][ext]'
    },
    parser: {
        dataUrlCondition: {
            maxSize: 52 * 1024 // 52kb
        }
    },
}

四种打包模块总结

image.png

4. asset处理图标字体

{
    test: /\.(ttf|woff?2)$/,
    type: 'asset/resource',
    generator: {
        filename:  'font/[name].[hash:3][ext]'
    },
}

五. plugin

做更多的事情(如css压缩); 插件的核心本质就是一个类

1. html-webpack-plugin

在打包文件生成index.html, webpack配置文件中可以自定义标题和index.html模板文件。模板文件在项目中新建public文件的index.html中编写。
安装依赖：yarn add html-webpack-plugin -D
（1）public/index.html中需要注意标题占位符的语法

<link rel="icon" href="<%= BASE_URL %>favicon.icon"> 
<title>
    <%= htmlWebpackPlugin.options.title %>
</title>

（2）webpack配置

const HtmlWebpackPlugin = require('html-webpack-plugin');

new HtmlWebpackPlugin({
    title: '我的标题1',
    template: './public/index.html', // 模板文件路径
}),

2. DefinedPlugin

自定义模板中填充数据(常量等),webpack内置插件无需安装。

const { DefinePlugin } = require('webpack')

webpack 的 plugins配置

new DefinePlugin({
    BASE_URL: '"./"'; // 注意：最终的值会原封不动赋值给常量 需要再包一层实现返回的是一个字符串
})

3.copy-webpack-plugin

拷贝静态资源，to可以省略默认为outPut的path路径

const CopyWebpackPlugin = require('copy-webpack-plugin')

webpack 的 plugins下配置

new CopyWebpackPlugin({
    patterns: [
        {
          from: 'public', // 拷贝public文件下的静态资源
            globOptions: {
              ignore: ['**/index.html'] // 忽略项，为了和htmlWebpackPlugin中生成的index.html重复生成问题
            }
        }
    ]
})

六.Babel

为什么需要Babek: JSX TS ES6+转换为平台直接使用，处理js兼容(可以类比css-loader)

相关依赖包

并不是都要安装，根据下面两种不同bable实现方式安装
@babel-core: babel内核处理转换的
@babel-cli ：babel转换可以通过命令行实现的工具
@babel/plugin-transform-arrow-functions :处理箭头函数的插件
@babel/plugin-transform-block-scoping :处理块级作用域，将let const转换为var的插件

@babel/preset-env: 预设/插件的集合，可以完成大多数新语法的处理(涵盖了大部分es6+语法等)。使用预设后plugin-transform-arrow-functions和plugin-transform-block-scoping等插件无需安装和配置了。

1. 命令行方式实现babel转换

需要安装的依赖包：yarn add @babel-core @babel-cli @babel/preset-env -D
命令行babel打包：npx babel src --out dir build --preset=@babel/preset-env

2.webpack配置实现babel转换

需要安装的依赖包：yarn add @babel-core @babel/preset-env babel-loader -D
webpack两种配置方式（推荐方式二）：
方式一： webpack的module中使用options属性配置,写法比较繁琐，targets参数可以配置兼容的浏览器和.browserslistrc配置浏览兼容效果一样，如果两个地方都配置以targets配置为主。推荐统一在browserslistrc中全局配置css和js的浏览器兼容性。

{
    test: /\.js$/,
    use: [{
        loader: 'babel-loader',
        options: {
            presets:[
                [
                    '@babel/preset-env',
                    { targets:'chrome 91' }
                ]
            ]
        },
    }],
},

方式二： 新建默认配置文件，添加到webpack中实现(推荐) babel-loader相关配置文件命名：
babel.config.js(json cjs mjs)-> 推荐
babelrc.json(js)：babel7之前的命名方式

babel.config.js：

module.exports = {
    presets: ['@babel/preset-env'],
}

webpack配置文件：

{
    test: /\.js$/,
    use: ['babel-loader'],
},

七、mywebpack.js

const path = require('path');
const { DefinePlugin } = require('webpack')
const { CleanWebpackPlugin } = require('clean-webpack-plugin');
const HtmlWebpackPlugin = require('html-webpack-plugin');
const CopyWebpackPlugin = require('copy-webpack-plugin')

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist'),
        clean: true, // 在生成文件之前清空 output 目录
    },
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    {
                        loader: 'css-loader',
                        options: {
                            importLoaders: 1,
                            esModule: false,
                        },
                    },
                    'postcss-loader'],
            },
            {
                test: /.less$/,
                use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'],
            },
            {
                test: /.(png|svg|gif|jpe?g)$/,
                type: 'asset',
                generator: {
                    filename:  'img/[name].[hash:6][ext]'
                },
                parser: {
                    dataUrlCondition: {
                        maxSize: 52 * 1024
                    }
                },
            },
            {
                test: /.(ttf|woff?2)$/,
                type: 'asset/resource',
                generator: {
                    filename:  'font/[name].[hash:3][ext]'
                },
            },
            {
                test: /.js$/,
                use: ['babel-loader'],
            },
        ],
    },
    plugins: [
        // new CleanWebpackPlugin(),
        new HtmlWebpackPlugin({
            title: '我的标题1',
            template: './public/index.html',
        }),
        new DefinePlugin({
            BASE_URL: '"./"'
        }),
        new CopyWebpackPlugin({
            patterns: [
                {
                  from: 'public', // 拷贝public文件下的静态资源
                    globOptions: {
                      ignore: ['**/index.html'] // 忽略项，为了和htmlWebpackPlugin中生成的index.html重复生成问题
                    }
                }
            ]
        })
    ],
};

总结

  1. 几个默认配置文件的作用
  • .browsweslistrc：服务于css js兼容做条件筛选的条件的
  • babel.config.js： 使用什么样的插件让babel用来工作的
  • postcss.config.js：告诉postcss-loader需要哪些插件对css兼容性做一些插件的使用的
  1. postcss和babel本身都不能处理css/js的转换，还需要安装其他loader或插件进行处理。
avatar
文章
阅读
粉丝