webpack

https://www.bilibili.com/vide...

webpack基础

webpack性能优化

单页面应用到多页面应用

wepack中一些核心实现思路

生产环境配置 https://www.bilibili.com/vide...

webpack.config.js

const {resolve} = require('path');
const HtmlWebpackPlugin \= require('html-webpack-plugin');
const MiniCssExtractPlugin = require('mini-css-extract-plugin');
const OptimizeCssAssetWebpackPlugin = require('optimize-css-assets-webpack-plugin');

//定义nodejs环境变量；决定使用browerslist的哪个环境
process.env.NODEENV = 'production';

//复用loader
const commonCssLoader = [
    //生成style标签，将css字符串注入
    //'style-loader',
    //抽离出单独的 .css文件
    MiniCssExtractPlugin.loader,
    //加载css文件
    'css-loader',
    //css兼容性处理 默认配置写成字符串，自定义配置写成对象
    //'postcss-loader'，
    {
        //还需要在package.json中定义browserslist
        loader:'postcss-loader',
        options:{
            ident:'postcss',
            plugins:()=>{
                require('postcss-preset-env')
            }
        }
    }
]

module.exports = {
    ertry: './src/js/index.js',
    output:{
        filename:'js/built.js',
        path:resolve(__dirname,'build')
    },
    //配置 loader，默认webpack只能打包js/json。
    //配置loader之后才能加载css/img/vue 等其他格式的文件
    module:{
        rules:[
            {
                test:/.\css$/,
                //loader 在数组中从后向前加载
                use:[...commonCssLoader]
            },
            {
                test:/.\less$/,
                //loader 在数组中从后向前加载 
                //1、执行less-loader将less编译为css。
                //2、执行postless 对css进行兼容性处理。
                //3、css-loader 将css加载到js中。 
                //4、MiniCssExtractPlugin 将css字符串抽离成单独的css文件
                use:[
                    ...commonCssLoader
                    //postcss不能对less进行兼容性处理，所以写在less-loader之后。
                    //等待leass-loade将less编译为css之后再进行兼容性处理
                    'less-loader'
                ]
            },
            //npm install --save-dev 
            //            eslint-loader eslint 
            //            eslint-config-airbnb-base eslint-plugin-import
            /*正常来讲，一个文件只能被一个 loader 处理。
            当一个文件要被多个 loader 处理，那么一定要指定 loader 执行的先后顺序：
                 先执行 eslint 在执行 babel
            设置 enforce:'pre' 优先执行
            */
            {
                //在package.json中 eslintConfig 进行配置，指示eslint进行哪些检查 --> 使用airbnb规则
                test:/.\js$/,
                exclude:/node_modules/,  //eslint 不检测node_modules 文件下的js
                enforce:'pre',           //优先执行
                loader:'eslint-loader',
                options:{
                    fix: true           //自动修复检测出的问题
                }
            },
            //npm install --save-dev 
            //            babel-loader @babel/core 
            //            @babel/preset-env @babel/polyfill core-js
            {
                //js兼容性处理
                test:/.\js$/,
                exclude:/node_modules/,
                loader:'babel-loader',
                options:[
                    presets:[
                        //预设preset-env(最基本的环境)兼容性处理的方式，
                        //只能进行一些简单的处理 箭头函数、const、let、三点运算符； 不能处理Promise
                        [
                            '@babel/preset-env',
                            {
                                // 按需加载
                                useBuiltIns: 'usage',
                                // 指定 core-js 版本
                                corejs: { version: 3 },
                                // 指定兼容性做到哪个版本浏览器
                                targets: {
                                    chrome: '60', firefox: '60', ie: '9',
                                    safari: '10', edge: '17'
                                }
                            }
                       ]
                    ]
                ]
            },
            {
                test: /\\.(jpg|png|gif)/,
                loader: 'url-loader',
                options: {
                    limit: 8 \* 1024,
                    name: '\[hash:10\].\[ext\]',
                    outputPath: 'imgs',
                    esModule: false  //关闭es6的模块化引入
                }
            },
            {
                //处理html中的图片引入，使用 commonjs 的模块化引入
                test: /\\.html$/,
                loader: 'html-loader'
            },
            {
                exclude: /\\.(js|css|less|html|jpg|png|gif)/,
                loader: 'file-loader',
                options: { outputPath: 'media' }
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            //导入打包html的模板
            template:'./src/index.html',
            minify:{
                //移除空格
                collapseWhitespace:true,
                //移除注释
                removeComments:true
            }
        }),
        new MiniCssExtractPlugin({
            filiname: 'css/built.css'
        }),
        //压缩css
        new OptimizeCssAssetWebpackPlugin()
    ],
    // 生产环境下会自动压缩 js 代码
    mode: 'production'
}

package.json

"eslintConfig":{
    //eslint 继承 airbnb 规则进行规范检查
    "extends": airbnb-base,
    //避免使用window报错
    "env":{ "browser":true }
}

懒加载VS预加载

index.js

console.log('index.js文件被加载')
//正常加载是并行加载，一次加载多个文件，部分先后，提前加载无用js是一种浪费
//import {mul} from './test';

document.getElementById("btn").onclick = function(){
    //懒加载：当文件需要使用的时候才加载
    //import(/* webpackChunkName: 'test',webpackPrefetch: 'true' */'./test').then(({ mul } => {
    //    console.log(mul(4,5));
    //}))
    //预加载：会在使用前提前加载js文件，等页面需要加载的资源加载完毕之后，偷偷加载资源
    //兼容性不好，慎用，pc端偶尔使用就好
    import(/* webpackChunkName: 'test',webpackPrefetch: 'true' */'./test').then(({ mul } => {
        console.log(mul(4,5));
    }))
}

test.js

console.log('test.js文件被加载');
    
export function mul(x,y){
    return x*y
}