webpack构建vue项目基础01 之手动webpack打包与指令打包

小小亮01

已于 2022-08-05 20:11:22 修改

阅读量482

点赞数 1

分类专栏： webpack 文章标签： webpack vue.js javascript

于 2022-08-02 20:23:27 首次发布

本文链接：https://blog.csdn.net/weixin_43845137/article/details/126129638

版权

webpack 专栏收录该内容

11 篇文章 0 订阅

订阅专栏

webpack构建vue项目基础之手动webpack打包与指令打包

01：webpack构建vue项目基础之手动webpack打包

目录介绍

新建一个文件目录 webpack-vue
webpack-vue / index.html、 webpack-vue / src、webpack-vue / dist、webpack-vue / src / main.js、webpack-vue / src / person.js
目录如下
目录解释
- index.html html的根目录
- src 源代码
  - main.js js的入口文件
  - person.js 模块化的导出导入测试
- dist 打包后的代码

main.js

console.log("main");
import {age} from "./person"
console.log("age",age);

person.js

export const age = 10

webpack 手动打包指令

注意点：webpack4以上需要加 -o （ webpack -version 查看webpack版本）
webpack ./src/main.js -o ./dist/bundle.js

index.html

注意点：bundle.js 是经过webpack打包生成的
- <script src="./dist/bundle.js"></script>

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

index.html 效果

在这里插入图片描述

02：webpack构建vue项目基础之脚本指令打包

初始化 package.json文件

运行 npm init -y 初始化生成 package.json文件
package.json文件进行配置脚本指令
- npm run dev 开发运行
- npm run build 打包构建生产包
- 需要安装开发时依赖 webpack 与 webpack-cli

  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^4.29.6",
    "webpack-cli": "^3.2.3"
  }

webpack.config.js 打包配置（入口与出口）

entry 入口
output 出口

const path = require("path");
module.exports = {
  // webpack执行打包的唯一入口
  entry: {
    main: [path.resolve(__dirname, './src/main.js')],
  },
  // 打包的输入
  output: {
    // 将所有依赖的模块合并输出到main_xxxxxx.js，xxxxxx为随机生成的6位hash码
    //当内容有改变时，hash会变化，防止缓存原因导致修改不更新
    filename: 'js/[name]_[contenthash:6].js',
    // 输出文件的存放路径， 必须是绝对路径
    path: path.resolve(__dirname, "./dist")
  },
}

main.js 与 person.js

main.js
console.log("main");
import {age} from "./person"
console.log("age",age);

person.js
export const age = 10

index.html

打包后需要手动引入 dist/js/main_797b16.js 文件
（执行 npm run dev指令然后把打包后的文件引入index.html之中）

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>
<body>
  <script src="./dist/js/main_797b16.js"></script>
</body>
</html>