webpack基本配置

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

上一篇:总结Vue第三天:模块化和webpack模块化打包:


下一篇:服务端渲染如何支持css样式修饰