首页 HTML5前端框架正文

webpack实用部分

景先 前端框架 2019-02-22 476 0

代理配置

proxy:{
    //将本地 /api/xxx  代理到localhost:8080/api/xxx
    '/api':'http://localhost:8080',

    // 将本地 /api/xxx 代理到localhost:8080/xxx
    '/api':{
        target:'http://localhost:8080',
        pathRewrite:{
            '/api':''
        }
    }
}

常用loader配置

entry:path.join(srcPath,'index),
module:{
    rules:[
        // 编译es6 
        { 
            test:/\.js$/,
            loader:['babel-loader],
            include:srcPath,
            exclude:/node_modules/
        },
        // 编译css
        {
            test:/\.css$/,
            // loader执行顺序从后往前
            loader:['style-loader','css-loader','postcss-loader']
        },
        // 编译scss
        {
            test:/\.scss/,
            loader:['sass-loader']
        }
    ]
}

output

// 根据环境不同配置不同的bundle
output:{
    file:'[name].[contentHash:8].js'
}

配置多入口

plugins:[
        // 多入口 - 生成 index.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'index.html'),
            filename: 'index.html',
            // chunks 表示该页面要引用哪些 chunk (即上面的 index 和 other),默认全部引用
            chunks: ['index']  // 只引用 index.js
        }),
        // 多入口 - 生成 other.html
        new HtmlWebpackPlugin({
            template: path.join(srcPath, 'other.html'),
            filename: 'other.html',
            chunks: ['other']  // 只引用 other.js
        })
]

抽离公共代码

不同的模块都可能被引入,打包时会重复打包,需要抽离出来。


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

        // 分割代码块
        splitChunks: {
             /**
             * initial 入口 chunk,对于异步导入的文件不处理
                async 异步 chunk,只对异步导入的文件处理
                all 全部 chunk
             */
            chunks: 'all',


            // 缓存分组
            cacheGroups: {
                // 第三方模块
                vendor: {
                    name: 'vendor', // chunk 名称
                    priority: 1, // 权限更高,优先抽离,重要!!!
                    test: /node_modules/,
                    minSize: 10,  // 大小限制
                    minChunks: 1  // 最少复用过几次
                },

                // 公共的模块
                common: {
                    name: 'common', // chunk 名称
                    priority: 0, // 优先级
                    minSize: 0,  // 公共模块的大小限制
                    minChunks: 2  // 公共模块最少复用过几次
                }
            }
        }
    }

如何进行懒加载

    import('./xxxxxxx.js').then(res => {
        console.log(res.default.xxxxx)  // 主义default
    })

处理JSX

npm indeall --save-dev @babel/preset-react

//.babelrc文件中增加以下代码
{
    "presets":[
        "@babel/preset-react"
    ]
}

处理vue

npm indeall --save-dev vue-loader

    module:{
        rules:[
            { 
                test:/\.vue$/,
                loader:['vue-loader],
                include:srcPath
            }
        ]
    }        

module,chunk,bundle的区别

  • moudule:各个源码文件,webpack中一切都是模块

  • chunk:多个模块合并成的,如entry ,import(),splitChunk

  • bundle:最终的输出文件

版权声明

本文仅代表作者观点,不代表本站立场。
本文系作者授权发表,未经许可,不得转载。

评论