webpack初体验（二）

来瓶二锅头00
183 阅读3分钟

一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第18天，点击查看活动详情。

前言

在上一篇文章中我们webpack初体验（1）中我们简要说了webpack的基础说明。在本章中我们将构建一个简要的webpack配置。

安装

安装webpack有几种方式，可以全局，也可以非全局。个人比较喜欢全局安装，因此我们只需要执行以下代码即可

npm install -g webpack

这样安装的话会自动安装最新的版本，有的时候我们可能不需要最新的版本（历史项目）,那么我们就需要去安装指定的版本

npm install -g webpack@版本号

如果安装webpack4+的版本，我们还需要安装一个webpack-cli,因此

npm install -g webpack-cli

项目的创建

在所需要创建的文件夹中通过右键，选择Git Bash Here（安装了Git的前提下，如果没有，使用电脑cmd）然后执行：

npm init

根据提示，输入自己所需要输入的信息，例如：项目名称，作者等。当然如果这个项目不准备在npm中发布的话，可以一直回车键。这样文件中就有一个package.json文件。

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

项目实例

1：在文件目录下创建一个src文件夹，里面新增一个index.js。文件类容为

document.write('欢迎学习二锅头的webpack系列教程')

2：在src同级创建一个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/main.js "></script>
</body>
</html>

文件目录结构为

first-demo
    |- package.json
    |- src
        |- index.js
    |- index.html

3：在命名行中执行

webpack

命令执行完后，可以看到文件夹总增加了一个dist文件。里面有一个main.js文件。目录结构如下

first-demo
    |- package.json
    |- dist
        |- main.js
    |- src
        |- index.js
    |- index.html

然后我们在浏览器中打开index.html.我们可以看到： image.png 至此我们一个简单的webpack应用就完成了。但是这样我们如果要有一些其他配置。例如：不希望使用默认的sit文件。怎么办呢。那么我们就需要使用webpack.config.js配置文件。

配置文件

在根目录下新建一个webpack.config.js文件。目录结构如下

first-demo
    |- package.json
    |- dist
        |- main.js
    |- src
        |- index.js
    |- index.html
    |- webpack.config.js

配置文件如下

const path = require('path');
module.exports = { 
    entry:{
        index:__dirname+'/src/index.js',//入口文件,__dirname是nodejs里的一个全局变量，它指向的是我们项目的根目录
    },
    output:{
        path: path.resolve(__dirname, 'dist'),//打包后的文件存放的地方
        filename:'bundle.js'   //打包后输出文件的文件名
    }
};

这里我们将文件打包后放置到dist文件夹中，且名称为bundle.js.因此我们需要更改下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/bundle.js "></script>
</body>
</html>

然后我们执行命令

webpack

执行成功胡，我们发现在dist文件夹中出现bundle.js文件。目录结构如下

first-demo
    |- package.json
    |- dist
        |- bunlde.js
    |- src
        |- index.js
    |- index.html
    |- webpack.config.js

然后我们在浏览器中打开index.html.我们可以看到： image.png 但是我们在日常开发中其实很少这样处理，一般都是通过npm脚本来执行命令。因此我们可以通过npm脚本来处理

npm脚本

在package.json文件中添加一个npm脚本

{
  "name": "first-demo",
  "version": "1.0.0",
  "description": "第一个demo",
  "main": "index.js",
  "scripts": {
    "dev": "webpack",
  },
  "author": "",
  "license": "ISC"
}

然后通过npm命令来代替

npm run dev

可以产生上面同样的效果。但是在正常开发过程中，我们需要有两套处理方式，那就是开发环境以及生产环境，生产环境的代码需要被压缩处理，但是开发环境不需要，因此我们重新更改上面的package.json文件

{
  "name": "first-demo",
  "version": "1.0.0",
  "description": "第一个demo",
  "main": "index.js",
  "scripts": {
    "dev": "webpack --mode development",
    "build": "webpack --mode production",
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC"
}

通过--mode指定所需要的运行环境 然后分别执行dev和build命令

npm run dev
npm run build

我们可以看到打包后的bundle.js文件大小会不同。生产环境的大小明显小于开发环境。 至此，通过webpack创建一个简单的demo已经完成。下一章，我们将从入口（entry）来详细剖析webpack.

avatar
文章
阅读
粉丝