webpack学习第二天 /es6 转为 es5 / js检验 Eslint/全局变量引用问题/webpack打包图片/添加公共路径

最新推荐文章于 2023-10-31 17:24:23 发布

@ForFuture

最新推荐文章于 2023-10-31 17:24:23 发布

阅读量398

点赞数

CC 4.0 BY-SA版权

分类专栏： webpack 文章标签： webpack eslint

本文链接：https://blog.csdn.net/GoodBodyBoy/article/details/102676631

webpack 专栏收录该内容

4 篇文章

订阅专栏

本文详细介绍了如何在webpack配置中实现ES6到ES5的转化，包括Babel的安装与配置。接着讲解了js的Eslint检验，以及如何解决全局变量引用问题，提供了两种解决方案。此外，还探讨了webpack如何打包处理图片，包括在js、css和html中引入图片的策略。最后，文章阐述了如何添加公共路径，优化webpack的打包效果。

第二天

将es6 转为 es5 转化高级语法

查Babel

安装 yarn add babel-loader @babel/core @babel/preset-env -D

yarn add @babel/plugin-proposal-class-properties -D

配置：

{
        test: /\.js$/,
        use: {
            loader:'babel-loader',
            options:{    //用babel-loader把es6转成es5   
                presets:[  //预置
                    '@babel/preset-env'
                ],
                plugins:[    //小插件
                    '@babel/plugin-proposal-class-properties' //识别类属性
                ]
            }
        }
     },

安装 yarn add @babel/plugin-transform-runtime -D
yarn add @babel/runtime //运行包
yarn add @babel/polyfill //补丁模块
module中 rules

 {
            test: /\.js$/,
            use: {
                loader:'babel-loader',
                options:{    //用babel-loader把es6转成es5   
                    presets:[  //预置
                        '@babel/preset-env'
                    ],
                    plugins:[
                        '@babel/plugin-proposal-class-properties',//识别类属性
                        "@babel/plugin-transform-runtime"
                    ]
                }
            },
            include:path.resolve(__dirname,'src'), //包括
            exclude:/node_modules/                 //排除
        },

js检验 Eslint

Eslint

安装 yarn add eslint eslint-loader -D
下载 .eslintrc.json 文件放在根目录下

{
    test: /\.js$/,
    use: {
        loader:'eslint-loader',      //检验js语法规范
        options:{
            enforce:'pre'            //在普通的loader前执行，之后为 post 
        }
    }

}

全局变量引用问题

1.添加 yarn add expose-loader //暴露全局
module：

{
    test:require.resolve('jquery'),
    use: 'pxpose-loader?$'
}

或者 import $ from 'expose-loader?$!jquery';

2.默认获得在每个模块中都注入 $

let webpack = require('webpack');

new webpack.ProvidePlugin({ //在每个模块中都注入$
            $:'jquery'
        })

3.给html文件添加jquery cdn
引入： import $ from 'jquery'
为了不重复打包：

 externals：{
      jQuery：'jquery'
  }

webpack打包图片

1.在js中创建图片来引入

import logo from './logo.png'
let image=new Image();
image.src= logo;
document.body.appendChild(image);

添加loader
yarn add url-loader -D 默认会在内部生成一张图片到build文件下
把生成的图片名字返回回来
url-loader 功能类似于 file-loader，但是在文件大小（单位 byte）低于指定的限制时，可以返回一个 DataURL。当大于限制时，默认使用 file-loader

{
    test：/\.(png|jpg|gif)$/,
    use:{
        loader:'url-loader',
        option:{
            limit: 200, 
            outputPath:'/img/'
            publicPath:'http://www.baidu.com' 只给图片添加cdn路径
        }
    }
}

2.在css引入background('url')

3.html中<img src=""/>

yarn add html-withing-loader -D

{
    test：/\.html$/,
    use:'html-withing-loader'
}

添加公共路径：

output: {
    filename: 'bundle.js',
    path: path.resolve(__dirname, 'build'),
    publicPath:'http://www.baidu.com'     //添加公共路径
},