Webpack搭建项目工程

 

虽然项目已经搭建成功，但是，我现在愿意重新走一次来帮自己和大家捋顺一点。

 

基本篇——打包成功第一个文件

1.新建一个文件，在当前目录下执行

npm init

然后一直回车：

可以发现，当前目录下多了一个 package.json 的文件，文件里面自动生成以下代码：

{
  "name": "demo",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

至此，项目初始化完成

2.执行

npm install

会发现当前目录下多了一个node_modules

3.安装项目依赖

npm install webpack --save-dev

4.新建一个文件 webpack.config.js，之后的配置基本都写在这个文件中。

现在，我们在目录下新建一个 src 文件夹，存放我们开发所需要的页面，src下面建立 page1目录，表示 page1 页面， page2 同理。

page1 下面的 index.html 如下

项目目录结构如下：

接下来，我们想分别以这两个页面为入口文件进行打包

为了使webpack启动方便，我们在package.json 中写以下代码：

"webpack": "webpack --config webpack.config.js --progress --display-modules --colors --display-reason"

如下图：

然后在webpack.config.js中写以下代码：