webpack快速上手

• 创建项目

 //index.js
 
 import createHeading from './heading.js'
 
 const heading = createHeading()
 
 document.body.append(heading)
 
 //heading.js
 export default()=>{ 
 
   const element = document.createElement('h2')
   
   element.textContent = 'Hello world'
   
   element.addEventListener('click',()=>{
   
       alert('hello world')
       
   })
   
   return element
   
}
//index.html

<script src="./index.js"></script>
安装yarn add webpack webpack-cli --dev

运行webpack

yarn webpack  生成dist文件

//index.html
<script src="./main.js"></script>
运行结果相同

//webpack 配置文件
//webpack.config.js
const path = require('path')

module.exports = { 

    entry:"./src/main.js",//入口文件
    
    output:{ //出口文件
    
        filename:"bundle.js",
        
        path:path.join(__dirname,'output')//绝对路径
    }
}

webpack 工作模式

 //默认production模式
 yarn webpack --mode production
 //开发模式 优化打包速度
 yarn webpack --mode development
 //none模式 运行最原始的打包
 yarn webpack --mode development

 官方文档
  [link](https://webpack.js.org/configuration/mode/).