Webpack入门教程（转）

最新推荐文章于 2023-09-26 09:31:01 发布

吃不胖的茶叶蛋

最新推荐文章于 2023-09-26 09:31:01 发布

阅读量182

点赞数

CC 4.0 BY-SA版权

本文链接：https://blog.youkuaiyun.com/twx843571091/article/details/88888742

本文介绍如何使用 Webpack 将多个 JavaScript 文件打包成一个文件。通过 npm init 创建 package.json 文件，安装 Webpack 并配置 webpack.config.js 文件。此外，还介绍了如何通过修改 package.json 中的 scripts 配置来简化 Webpack 的使用。

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

今天上午看到一篇非常棒的webpack入门教程，原文链接：
https://segmentfault.com/a/1190000006178770#articleHeader4。

使用npm init命令创建package.json文件
安装webpack: npm install --save-dev webpack
创建两个js文件：main.js Greeter.js 其中main.js 依赖Greeter.js。
我们的目的就是把这两个js文件用webpack打包成一个js文件。
使用命令webpack main.js bundle.js，其中main.js是入口文件，bundle.js是打包后的文件。

上面的命令稍微有点‘复杂’，但是我们可以通过配置文件来打包。

首先创建一个webpack.config.js文件，文件内容如下：

module.exports = {
  entry:  __dirname + "/app/main.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/public",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

其中的entry就是我们上面步骤4的main.js（也就是入口文件），output用于指定打包后的那个js文件的路径和名字。

使用命令 webpack就能生成bundle.js了。

另外，还可以修改node的配置文件来执行打包：

//package.json
"scripts": {
     "start":"webpack"
  },

OK,现在使用命令npm start就能成功打包js文件了。