webpack之打包初体验

前言：

这篇文章创建了一个最简单的webpack项目；

对webpack.config.js进行了最简单的配置；

尝试着进行了一次最简单的webpack打包。

正文：

首先构建项目目录：

$ mkdir webpack-pro1 $ cd webpack-pro1 $ npm init $ npm i -D webpack webpack-cli $ touch webpack.config.js $ mkdir src $ cd src $ touch app.js a.js b.js index.html

这里用的命令行工具是Git bash。

构建好之后的项目目录如下图：

接着编辑index.html内容：

编辑a.js内容

编辑b.js内容

编辑app.js内容

编辑webpack.config.js 基本配置：

const path = require('path'); module.exports={ entry :{ path: path.resolve(__dirname,'src/app.js') }, output:{ path:path.resolve(__dirname,'dist'), //这里必须是绝对路径 filename:'app.hundle.js' }, mode:'development' }

package.json的内容会由我们文章开始的npm init命令自动生成，如下图：

最后，我们需要在package.json中的script下面配置我们的命令

上图中 "--config webpack.config.js" 是指定webpack的配置文件，可省略。

ok，现在可以运行命令 npm run build。

命令执行完毕，发现我们的项目目录发生变化：项目下新增了dist目录，并自动生成app.hundle.js文件。

webpack会根据webpack.config.js的配置，将app.js及app.js依赖的a.js、b.js进行统一打包生成app.hundle.js。