webpack基本配置

2021-12-19 20:02:02 阅读：203 来源： 互联网

标签：基本 const plugin require 配置 loader webpack css

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

标签：基本,const,plugin,require,配置,loader,webpack,css
来源： https://www.cnblogs.com/5941web/p/15708363.html

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

ICode9