小白学 Webpack之初探文件打包

单个文件打包

我们写好一个页面的js,可以单个文件进行打包
例如我们目录如下
描述
src/index.js

const  info=require('./module.js')
console.log(info)

module.js

module.exports={
  author:'黑白课堂',
  name:'学习webpack'
}

index.html

<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
    <script src="dist/main.js"></script>
</head>
<body>

</body>
</html>

现在我们执行打包我们的index.js,如果不打包直接引入,它会 报错
描述

webpack ./src/index.js -o ./dist/ --mode=production
Time: 78ms
Built at: 2020-10-11 12:03:51 ├F10: PM┤
  Asset   Size  Chunks             Chunk Names
main.js  1 KiB       0  [emitted]  main
Entrypoint main = main.js
[0] ./src/index.js 53 bytes {0} [built]
[1] ./src/module.js 69 bytes {0} [built]

现在刷新就有数据了。
描述

快捷键打包

package.json配置下快捷键

{
  "name": "02",
  "version": "1.0.0",
  "description": "",
  "main": "main.js",
  "devDependencies": {
    "webpack": "^5.0.0",
    "webpack-cli": "^4.0.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack ./src/index.js -o ./dist/ --mode=production"
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

webpack.config.js打包

在目录下新建webpack.config.js配置文件

var path=require('path');

module.exports={
  //入口文件
  entry:'./src/index.js',
  output:{
    //文件名
    filename:'main.js',
    path:path.resolve(__dirname,'./dist/')
  }
}

关于 path 这个方法,可查阅 Node.js Path 模块

现在我们只需要执行webpack即可打包

评论区 (0)

没有记录
支持 markdown,图片截图粘贴拖拽都可以自动上传。