• webpack常用配置


    1.webpack入门概念

    webpack是一个静态模块打包工具

    不是运行的时候打包,是代码打包好后在‘浏览器’运行,在代码运行前就进行一步处理,这中间的一步,也引出了webpack工程化的强大能力。

    区别webpack和webpack-cli

    在webpack4之前,这两个东西是合二为一的,4开始,webpack相当于干活的,而cli相当于发命令的

    webpack不用全局下载,只需要局部下载即可

    webpack正处于一个发展期,有很多不同的版本,如果都用一个版本,可能不能处理多个新旧不同的项目

    npx webpack 使用局部webpack进行打包(手动敲命令,使用布局) , 也可以使用npm scripts运行的webpack命令默认先找局部的webpack(使用配置,默认使用局部)

    webpack本身就能解析打包各种模块规范的js代码

    包括es6 , CommonJs , AMD/requirejs , CMD/seajs

    核心基本概念

    1.模式mode   development/production(默认)
    2.入口entry
    3.输出output
    4.加载器loader
    5.插件plugin
    

    10个常用配置

    1.mode
    2.entry
    3.output
    4.module
    5.plugins
    6.devtools
    7.devSever
    8.reslove
    9.optimization
    10.externals
    

    相关依赖包

    webpack
    webpack-cli
    webpack-dev-server
    webpack-merge
    cross-env
    css-loader
    style-loader
    postcss-loader
    less-loader
    stylus-loader
    sass-loader
    file-loader
    url-loader
    image-webpack-loader
    babel-loader
    vue-loader
    eslint-loader
    MiniCssExtractPlugin.loader
    thread-loader
    
    html-webpack-plugin
    clean-webpack-plugin@1.0.1
    mini-css-extract-plugin
    optimize-css-assets-webpack-plugin
    copy-webpack-plugin
    terser-webpack-plugin
    add-asset-html-webpack-plugin
    webpack-bundle-analyzer
    webpack.ProgressPlugin
    webpack.HotModuleReplacementPlugin
    webpack.HashedModuleldsPlugin
    webpack.DllPlugin
    webpack.DllReferencePlugin
    new webpack.ProvidePlugin
    
    

    基本使用

    热更行,打包指令,自动将打包文件插入到页面当中
    
    webpack.config.js配置:
    
    const path = require('path')
    const HtmlWebpckPlugin = require('html-webpack-plugin')
    const CleanWebpackPlugin = require('clean-webpack-plugin')
    // 输入目录,输出绝对路径
    function resolve(dir) {
        return path.resolve(__dirname,dir)
    }
    module.exports = {
        //模式
        mode:'production',
        //入口
        entry:resolve('src/index.js'),
        //出口
        output:{
            path:resolve('dist'),
            filename:'bundle.js'
        },
        //模块加载器
        module:{
            rules:[
            ]
        },
        //插件
        plugins:[
            //向页面中插入引入打包的js/css的代码
            new HtmlWebpckPlugin({
                template:'public/index.html'
            }),
            //清楚打包文件夹 (dist)
            new CleanWebpackPlugin(['dist'])
        ],
        //开发服务器
        devServer:{
            open:true,//自动打开浏览器访问
        }
    }
    
    package.json口令配置:
      "scripts": {
        "build": "webpack --mode production",   //  yarn build / npm run build
        "dev":"webpack-dev-server --mode development"  //yarn dev  / npm run dev
      },
    

    js打包

    主要使用babel进行对js的打包

    webpack文档 => loader => babel

    //1.对babel的理解
    webpack本身有用处理各种模块化规范的能力,但是,并不具备处理es6语法的能力,
    真正处理es6的是:babel
    但是babel本身在某种意义上也不具备编译es6的能力,babel相当于提供了一个平台,babel依赖的非常多单独针对某个语法编译的插件,比如async就有一个babel的编译插件,const也有一个,箭头函数又有一个,而babel把他们汇集在一起。
    意义何在?:
    如此众多的插件,不可能每个都去配置,所以用以一个大包来汇总和众多小的插件
    
    
    查看@babel/preset-env 下package.json 就可以查看到babel的众多依赖
    
    //2.babel的解析
    1.babel只转换不兼容的“新语法”(可以理解为语法糖,本质上还是底层的一些语法实现的)
    =>const/let/箭头函数/解构赋值/class语法.... 
    
    2.babel不转换新的api (理解为新的方法,浏览器本身就不存在,所以无法编译)
    =>Promise/Map/Set/Object.assign()/Generator/Proxy ....
    
    //3.引出@babel/polyfill : 可以理解为一个补丁包
    既然babel不能编译新的api,那么就需要一个包将这些方法都实现,然后打入项目之中,供人使用
    =>而@babel/polyfill主要依赖两个包
    1.core-js:一个俄罗斯的小哥所写,主要重写了很多es6,es7..的语法
    2.regenerator-runtime: 弥补core-js没有实现的async await的缺陷
    

    更进一步的处理:

    1.我们使用基础配置的babel进行es6语法的编译
    
    2.使用 @babel/polyfill 进行es6新api进行编译
    =》低版本浏览器语法,打包支持es6语法,通常是polyfill通过类似打补丁的方式将包引入到项目当中
    =》既然有包打入项目,就可以进行优化
    	1.使用配置的方式,实现按需引入,用了什么语法就打入什么补丁
        2.当使用有很多模块使用了类语法的时候,每个模块都会独立产生一个辅助函数=>_classCallCheck
    	可以提取出来生成一次即可,就需要使用plugins:[@babel/plugin-transform-runtime] 
    

    打包图片

    主要用到的loader有:

    • file-loader
    • url-loader( 依赖于file-loader,针对小图片可以进行base64处理,减少请求)

    有时候会出现url-loader的包依赖于file-loader但是却没有下载的情况,需要自行下载

    webpack.config.js下module属性配置:
       //模块加载器
        module:{
            rules:[
                //处理图片
                {
                    test:/.(png|jpg|gif|svg)$/,
                    use:{
                        loader:'url-loader',
                        options:{
                            limit:1024*10, //把小于 5kb的文件转成Base64的格式
                            name:'img/[name].[ext]',
                        }
                    }
                }
            ]
        }
    

    还有图片压缩,自行搜索使用

    出了图片,还有字体,音频同样使用的都是url-loader

    使用方法和图片一样,直接添加一个对象配置即可,修改test属性和use的options属性
    

    css处理

    对于处理不同的css文件,需要不同的loader:
    css:  1.css-loader  2.style-loader 
    less:  1.less  2.less-loader
    stylus:  1.stylus  2.stylus-loader 
    sass:  1.node-sass  2.sass-loader //注意:node-sass下载可能失败,yarn < npm < cnpm
    

    使用配置:

    css全部被打包进bundle.js当中,css的样式都是通过js来写入的

    webpack.config.js下module属性配置:
       //模块加载器
        module:{
            rules:[
                //处理css
                {
                    test: /.css$/,
                    use: ['style-loader', 'css-loader'] //从下往上,从右往左
                },
                //处理less
                {
                    test: /.less$/,
                    use: ['style-loader', 'css-loader', 'less-loader'] 
                },
                //处理stylus
                {
                    test: /.(styl|stylus)$/,
                    use: ['style-loader', 'css-loader', 'stylus-loader'] 
                }
            ]
        }
    

    PostCss

    利用PostCss可以:1.自动添加代码的厂商前缀 2.准换现代的css代码

    主要包:autoprefixer  postcss-loader
    配置:
    webpack.config.js下module属性配置:
       //模块加载器
        module:{
            rules:[
                //处理css
                {
                    test: /.css$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader'] //从下往上,从右往左
                },
                //处理less
                {
                    test: /.less$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader', 'less-loader'] 
                },
                //处理stylus
                {
                    test: /.(styl|stylus)$/,
                    use: ['style-loader', 'css-loader', 'postcss-loader', 'stylus-loader'] 
                }
            ]
        }
    
    再创建postcss.config.js:
    module.exports = {
        plugins:[
            require('autoprefiexer')(),
            require('postcss-px2rem')({
                unitRem:37.5
            })
        ]
    }
    

    单独打包css

    要用上mini-css-extract-plugin    MiniCssExtractPlugin.loader
    
    webpack.congfig.js:
    const MiniCssExtractPlugin = require('mini-css-extract-plugin')
        module:{
            rules:[
                //处理css
                {
                    test: /.css$/,
                    use: [MiniCssExtractPlugin.loader, //代替style-css
                          'css-loader', 
                          'postcss-loader'] //从下往上,从右往左
                },
                //处理less
                {
                    test: /.less$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'less-loader'] 
                },
                //处理stylus
                {
                    test: /.(styl|stylus)$/,
                    use: [MiniCssExtractPlugin.loader, 'css-loader', 'postcss-loader', 'stylus-loader'] 
                }
            ]
        },
        plugins:[
            //从js中抽取css单独打包
            new MiniCssExtractPlugin({
                filename:'css/[name].css'
            })
        ]
    

    注意:抽取文件单独打包的时候需要主要一些路径问题,此处会出现一个绝对路径的问题

    解决:

        output:{
            path:resolve('dist'),
            filename:'bundle.js'
            publicPath:'/'      //给出口文件的路径设添加为/,设置为相对路径
        },
    

    系列问题

    1.区别webpack的两个工具包:webpack和webpack-cli
    =>在webpack 3中,webpack本身和它的CLI以前都是在同一个包中,但在第4版中,他们已经将两者分开来更好地管理它们。cli相对来说是一个命令工具
    
    2.为什么建议不要全局下载webpack工具包?
    =>因为webpack不同版本的配置常常是不一样的,为了不同的项目,最好都单独启用一个webpack
    
    3.如何解决webpack命令不能识别的问题?
    =>有一些旧版本的webpack安装后还需要配置环境变量才能使用
    
    4.webpack的10大配置选项
    5.webpack常用的10个loader
    6.webpack中常用的5个plugin
    =>见上
    
    7.为什么要使用html-webpack-plugin?
    =>自动引入打包好后的bundle.js ,为html文件中引入的外部资源如script、link动态添加每次compile后的hash,防止引用缓存的外部文件问题
    
    8.为什么要使用clean-webpack-plugin?
    =>有时候我们打包生成的文件通常是随即名,而使用clean-webpack-plugin可用来清除旧文件,产生新的文件,避免相同文件不同名的问题
    
    9.区别css-loader和style-loader
    =>webpack是用JS写的,运行在node环境,所以默认webpack打包的时候只会处理JS之间的依赖关系
    =>如果在JS中导入了css,那么就需要使用 css-loader 来识别这个模块,通过特定的语法规则进行转换内容最后导出
    css-loader:会处理 import / require() @import / url 引入的内容.将css文件生成一个js数组数据,包括路径,css字符串
    style-loader:这个数据页面并不能直接使用。而是使用通过style-loader再页面中创建一个style标签,将css字符串属性写入到页面当中
    
    
    10.区别url-loader和file-loader
    =>1.文件大小小于limit参数,url-loader将会把文件转为DataURL;2.文件大小大于limit,url-loader会调用file-loader进行处理,参数也会直接传给file-loader。因此我们只需要安装url-loader即可。。
    
    11.webpack-dev-server用来做什么
    =>1.webpack-dev-server是一个小型的Node.js Express服务器
    
    12.说说热模替换(HMR)的理解
    =>模块热替换(HMR)的作用是,在应用运行时,无需刷新页面,便能替换、增加、删除必要的模块。
    =>具体实现思路可以看官方文档: https://www.webpackjs.com/concepts/hot-module-replacement/
    
    13.说说代理服务器的理解
    ?
    
    14.说说history路由404问题
    ?
    15.@babel/preset-env能干什么?不能干什么?如何解决?
    =>包含了各种可能用到的转译工具。用来降级和转义es语法
    =>不能转换浏览器不存在的api
    
    16.直接使用@babel/polyfill有什么问题,如何解决?
    =>包过大,最好是按需引入
    
    18.如何对css进行单独打包和压缩
    =>普通的打包通过css-loader将css文件转化为js数组数据,然后通过style-css再页面创建style标签,将属性和值插入其中
    =>如果要单独打包,就要用到extract-text-webpack-plugin@next,将css从js中抽取出来,将style-css的功能替换为单独创建文件
    
    
    19.postcss是什么?
    =>将css转换成css抽象语法树,可以简单的理解为将css转换成js,调用插件来处理抽象语法树,通过插件实现对css的处理。
    
    20.autoprefixer用来做什么?
    =>自动加上一些属性的厂商前缀
    
    21.postcss-px2rem用来做什么的?
    =>这些css文件打包前,将文件里面的px计算成rem,然后在进行解析,这样就可以直接在页面中使用px了。
    
  • 相关阅读:
    memcached基础与配置详解
    最小化安装CentOS基础命令
    源码编译redis及解决三个开机告警问题
    HAProxy之一----HAPproxy配置参数详解
    HAProxy之二----HAProxy实现高级负载均衡实战和ACL控制
    6 SQL语言——distinct去重
    5 SQL语言——连接符
    04 Oracle Sql语言API
    03 Oracle——用户密码忘记重置
    02 Oracle——账号管理
  • 原文地址:https://www.cnblogs.com/JCDXH/p/13679178.html
Copyright © 2020-2023  润新知