VUE,webpack简单使用脚本打包（手动配置）_vue打包与webpack打包-优快云博客

本文链接：https://blog.youkuaiyun.com/NI_computer/article/details/109081327

本文介绍了如何手动配置Webpack进行前端资源模块化管理和打包，包括初始化项目、本地安装Webpack及CLI、编写配置文件指定入口和出口，以及运行脚本进行打包。特别指出，打包入口应为单一文件，并且默认情况下Webpack只能打包JS文件，需要打包其他格式文件需额外安装插件。最后推荐使用基于Vue+Webpack的自动配置项目。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

Webpack是当下最热门的前端资源模块化管理和打包工具。它可以将许多松散的模块按照依赖和规则打包成符合生产环境部署的前端资源。还可以将按需加载的模块进行代码分隔，等到实际需要的时候再异步加载。通过loader的转换，任何形式的资源都可以视作模块，比如CommonJs模块、AMD模块、ES6模块、CSS、图片、JSON、Coffeescript、LESS等。
webpack官网地址

webpack的简单使用：
使用前提：已经安装了node.js最近版本

1.初始化项目
进入项目中

npm init

一直回车，
然后输入“y”，
可以看见文件中多了一个package.json

2.本地安装webpack&webpack-cli
建议使用本地安装，不使用全局安装
在终端进入要打包的文件夹中，安装webpack

npm install–g webpack

在这里插入图片描述在webpack4版本之后，将项目初始化一些功能封装在webpack-cli中，所以我们还要安装一个cli

npm install --save-dev webpack-cli

3.编写配置文件
新建一个webpack.config.js文件
在里面写入配置内容，添加入口和出口：

const path = require('path');
module.exports = {
    entry: path.join(__dirname, './src/app.js'),
    output: {
        path: path.join(__dirname, '. /bin'),
        filename: 'app.bundle.js'
    }
}

entry内设置打包的文件
output内设置打包后文件的位置和名字
假设我们需要打包的文件为src文件夹下的app.js
打包到bin文件夹下，命名为app.bundle.js

4.使用脚本打包
在package.json内找到"scripts"，在里面添加"build":“webpack”

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack"
  },

5.运行脚本打包
在终端输入进行打包

npm run build

这时候就能看见在相应文件夹下多了一个打包文件。

注意：

1.打包入口只能为一个文件，如果需要打包多个js文件，可以在主文件中用require引入其他js文件，再打包主文件。

2.没有插件的webpack只能打包js文件，如果需要打包其他格式的文件需要下载plugin插件

这种办法都还是比较麻烦的，所以建议一开始创建项目的时候就使用webpack自动配置生成一个基于vue+webpack的项目。

想要生成自动配置的项目可以看另外一个文章：
使用webpack自动配置项目