美文网首页
珠峰webpack学习记录

珠峰webpack学习记录

作者: 正在刷新log | 来源:发表于2020-09-24 00:02 被阅读0次
    • 指定打包文件
      webpack --config webpack.config.deb.js
    • 开发服务器 webpbck-dev-server
    • 插件 htmlwebplckplugin 打包html文件
    • 样式loader于插件
    1. less less-loader
    2. css-loader
    3.style-loader
    4. mini-css-excract-plugin  抽离css插件
    5.postcss-loader autoprefixer  加前缀
    6. 压缩css 到(mini-css-excract-plugin 有教程) 用到optimize-css-assets-webpack-plugin和 terser-webpack-plugin
    

    2 解析js

    babel 都可以到babel官网中找
    1、转化es6class @bable/plugin-proposal-class-properties
    2、bable-loader @bable/core @bable-preset-env
    
    image.png

    处理es7

    babel官网详解
    

    js规则 eslint

    npm install eslint eslint-loader
    

    3 全局变量暴露给window

    1、expose-loader 暴露到window上(两种方法如下图)


    image.png
    image.png

    2、providerPlugin 给每个模块提供一个$

    image.png

    3、引入不打包


    image.png

    打包图片资源

    1、url-loader

    配置大于多少的时候用base64的格式标识图片
    

    2、file-loader

    用于js文件导入图片
    例如
    import logn from './logn.png';
    还有css种也是这种处理
    

    3、html-withimg-loader

    <img src="./logn.png">
    这种格式需要用到
    

    打包多页应用

    image.png

    有用的小插件

    image.png

    优化

    image.png
    image.png

    相关文章

      网友评论

          本文标题:珠峰webpack学习记录

          本文链接:https://www.haomeiwen.com/subject/ezmayktx.html