webpack

处理ES2015

• webpack是因为打包需要，所以才会处理import和export，除此之外，并不能转化es6其他的特性
• 如果需要打包过程中处理es6特性转换，需要给js配置编译型loader yarn add babel-loader @babel/core @babel/preset-env --dev.

 //webpack.config.js
 const path = require('path')
module.exports = { 
    mode:'none',
    entry:"./src/main.js",//入口文件
    output:{ //出口文件
        filename:"bundle.js",
        path:path.join(__dirname,'dist'),//绝对路径
        publicPath:'dist/'
    },
    module:{
        rules:[
            {
                test:/.js$/,
                use:{
                    loader:'babel-loader',
                    options:{ 
                        presets:['@babel/preset-env']
                    }
                }
            },
            {
                test:/.css$/,
                use:[
                    'style-loader',
                    'css-loader',

                ]
            },
            {
                test:/.jpg$/,
                use:{
                   loader:'url-loader',
                   options:{ 
                       limit:10 * 1024
                   }
                }
                    
                
            },
        ]
    }
}


//总结：webpack只是打包工具，加载器可以用来编译转换代码

webpack加载资源的方式

• 遵循ES Modules标准的import声明

import './heading.css'

• 遵循commonjs标准的require函数

const heading = require('./heading.js').default //注意
require('./main.css')

• 遵循AMD标准的define函数和require函数

define(['./heading.js','./main.css','./icon.png'],(creatheading,icon)=>{在这里插入图片描述

      
})
define(['./heading.js','./main.css','./icon.png'],(creatheading,icon)=>{在这里插入图片描述

      
})
注：除非必要，不要混合使用，混用会降低项目的可维护性，