webpack基本配置

2023-12-22 12:56:51

webpack配置

`const path = require('path')
const webpack = require('webpack')
const { merge } = require('webpack-merge')
const { CleanWebpackPlugin } = require('clean-webpack-plugin')
const MiniCssExtractPlugin = require('mini-css-extract-plugin')
const TerserJSPlugin = require('terser-webpack-plugin')
const OptimizeCSSAssetsPlugin = require('optimize-css-assets-webpack-plugin')
const webpackCommonConf = require('./webpack.common.js')
const { srcPath, distPath } = require('./paths')

module.exports = merge(webpackCommonConf, {
mode: 'production',
output: {
// filename: 'bundle.[contenthash:8].js', // 打包代码时，加上 hash 戳
filename: '[name].[contenthash:8].js', // name 即多入口时 entry 的 key
path: distPath,
// publicPath: 'http://cdn.abc.com' // 修改所有静态文件 url 的前缀（如 cdn 域名），这里暂时用不到
},
module: {
rules: [
// 图片 - 考虑 base64 编码的情况
{
test: /.(png|jpg|jpeg|gif)$/,
use: {
loader: 'url-loader',
options: {
// 小于 5kb 的图片用 base64 格式产出
// 否则，依然延用 file-loader 的形式，产出 url 格式
limit: 5 * 1024,

                    // 打包到 img 目录下
                    outputPath: '/img1/',

                    // 设置图片的 cdn 地址（也可以统一在外面的 output 中设置，那将作用于所有静态资源）
                    // publicPath: 'http://cdn.abc.com'
                }
            }
        },
        // 抽离 css
        {
            test: /\.css$/,
            use: [
                MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                'css-loader',
                'postcss-loader'
            ]
        },
        // 抽离 less
        {
            test: /\.less$/,
            use: [
                MiniCssExtractPlugin.loader,  // 注意，这里不再用 style-loader
                'css-loader',
                'less-loader',
                'postcss-loader'
            ]
        }
    ]
},
plugins: [
    new CleanWebpackPlugin(), // 会默认清空 output.path 文件夹
    new webpack.DefinePlugin({
        // window.ENV = 'production'
        ENV: JSON.stringify('production')
    }),

    // 抽离 css 文件
    new MiniCssExtractPlugin({
        filename: 'css/[name].[contenthash:8].css'
    })
],

optimization: {
    // 压缩 css
    minimizer: [new TerserJSPlugin({}), new OptimizeCSSAssetsPlugin({})],
}

})
`

前端代码为何要进行构建和打包？

-体积更小，压缩合并，加载更快

-编译高级语言或者语法 ts,es6+,模块化，sass...

-兼容性和错误检查 polyfill,postcss,eslint

-统一，高效的开发环境

-统一的构建流程和产出标准

-集成公司构建规范（提测，上线）

module chunk bundle分别是什么有何区别？

-module-各个源码文件，webpack中一切皆模块，例如js文件，css文件，甚至图片文件都是模块

-chunk-多模块合并成的，如entry import() splitChunk 通过这些方式去分析配置依赖的模块结合

-bundle-最终的输出文件

loader和plugin的区别

-模块转换器 less->css

-plugin扩展插件，如HtmlWebpackPlugin

webpack如何实现懒加载

import() 结合vue-router异步加载路由

webpack常见性能优化

1.开发环境提升开发体验和效率

1-1构建速度 babel-loader

ignorePlugin直接不引入，代码中没有，按需动态引入，比如moment的多语言包，大部分用不上

noParse对于.min这些已经模块化过的文件，webpack不再进行压缩

happyPack js单线程，开启多进程打包提高构建速度(多核cpu)

paralleluglifyplugin 自动刷新热更新 dllplugin

2.优化产出代码

小图片base64编码

bundle加hash

懒加载

提取公共代码

使用cdn加速

ignorePlugin

babel-runtime和babel-polyfill的区别

babel-polyfill会污染全局

babel-runtime不会污染全局

产出第三方lib要用babel-runtime

码农公寓