针对JS文件进行打包(WebPack打包学习笔记系列一)

首先最好了解一下webpack的原理和优点,网上很多文章都有很详细的相关介绍,推荐 webpack概念,这里就不提了,这里只是通过一个demo展示一下webpack的使用效果

该例子期望的效果是可以在终端通过npm start命令对文件进行打包

前期需要做的准备:

步骤一:创建一个本地站点

站点结构如下

---root
    ---dist 
        ---index.html
    ---src
        ---index.js
        ---hello.js

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id='root'>
    </div>
    <script src="bundle.js"></script>
</body>

</html>

hello.js

module.exports = function() { 
     alert("hello")
};

index.js

const hello = require('./hello.js');

hello()

步骤二:安装node.js(webpack.js是基于node.js)

步骤三:通过npm创建package.json

创建命令

npm init

执行命令之后新增文件package.json,此时站点结构:

---root
    ---dist 
        ---index.html
    ---src
        ---index.js
        ---hello.js
    ---package.json

package.json文件(一切都默认就可以)

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

步骤四:通过npm来安装webpack

安装命令

npm install --save-dev webpack

执行命令之后新增文件夹node_modules, 此时站点结构:

---root
    ---dist 
        ---index.html
    ---src
        ---index.js
        ---hello.js
    ---package.json 
    ---node_modules

package.json文件(新增webpack结点)

{
  "name": "test1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1" //新增结点
  }
}

步骤五:创建webpack.config.js

目前只是找到手动创建方式,手动创建webpack.config.js文件之后,站点结构:

---root
    ---dist 
        ---index.html
    ---src
        ---index.js
        ---hello.js
    ---package.json 
    ---node_modules  
    ---webpack.config.js

配置

步骤一:编写webpack.config.js

module.exports = {
    entry: __dirname + "/src/index.js",
    output:{
        path:__dirname + "/dist/",
        filename:"bundle.js"
    }
}

entry:是打包文件入口
output:是打包的文件所在的地方和文件名

配置的含义:通过入口文件将文件打包成bundle.js,然后放在dist文件夹下面

步骤二:如何通过npm start进行打包,需要配置package.json

package.json文件

{
  "name": "test1",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack" 
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "webpack": "^3.8.1"
  }
}

scripts结点下面添加“start”属性

运行 npm start

在终端运行npm start命令,新生成bundle.js,文件结构

---root
    ---dist 
        ---index.html
        ---bundle.js
    ---src
        ---index.js
        ---hello.js
    ---package.json 
    ---node_modules  
    ---webpack.config.js

经过上面步骤:就可以在终端使用npm start命令对js文件进行打包,打包生成的bundle.js文件位于dist文件下面,而index.html里面引用了bundle.js,所以当用浏览器访问index.html的时候,会弹出alert

WebFrontAuto
JSRUN前端笔记, 是针对前端工程师开放的一个笔记分享平台,是前端工程师记录重点、分享经验的一个笔记本。JSRUN前端采用的 MarkDown 语法 (极客专用语法), 这里属于IT工程师。