2. 入口与出口

NO x ONE

已于 2022-05-08 22:09:16 修改

阅读量715

点赞数

分类专栏： 🌈 webpack 🌈 文章标签： webpack javascript 前端

于 2022-05-08 12:42:52 首次发布

本文链接：https://blog.csdn.net/Xiaoyc7/article/details/124646541

版权

🌈 webpack 🌈 专栏收录该内容

4 篇文章 0 订阅

订阅专栏

二、入口与出口

1.概念

入口即为webpack打包时的起始点，定义entry字段即可，出口即webpack打包后的输出文件，配置output字段即可

2.配置

webpack.config.js （所有的webpack配置均在webpack.config.js文件定义）

module.exports={
  entry:'./src/index.js', // 这里定义打包入口文件为 src/index.js
  output:{
    // path:'./dist', // 打包输出路径，不推荐这样写，因为windows和Linux系统文件路径表示不一样,前者是 One/dist,后者是One\dist，故需要使用node内置路径解析模块path
    path:path.resolve(__dirname,'dist'), 
    filename:'bundle.js' // 打包输出文件  bundle.js
  }
}

当然，也会有多个入口文件的情况

module.exports={
  entry:{
    main:'./src/index.js',
    common:'./src/utils.js'
  }，
  output:{
    path:path.resolve(__dirname,'dist'), 
    filename:'[name].bundle.js' // 输出文件为 main.bundle.js和common.bundle.js
  }
}

3.执行命令

npm run build

这时会发现打包创建了dist目录，且该目录下有一个bundle.js文件，在dist目录下手动创建index.html内容如下

dist/index.html

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="bundle.js"></script>
</body>
</html>