webpack的安装和打包文件

一,前言

在webpack的世界里,一切皆为模块(html除外)
webpack只能打包js和json文件
这篇介绍webpack的安装及如何打包js和json文件

 
 
1
2
3
4

---

二,安装

创建测试工程目录:webpack
使用npm安装webpack,创建package.json配置文件,包含项目名称和版本号

 
 
1
2
3

{
  "name":"webpack_test",
  "version":"1.0.0"
}
 
 
1
2
3
4

建议先全局安装webpack
再根据项目配置局部安装对应版本的webpack,
以免本机webpack版本和项目的webpack版本不一致导致不兼容
注意:mac系统要加sudo

 
 
1
2
3
4
5

    // 全局安装
    npm install webpack -g
    // 局部安装
    npm install webpack --save-dev
    // 指定版本号的局部安装
    npm install webpack@3.8.1
 
 
1
2
3
4
5
6

webpack4.x版本需要单独安装webpack-cli,所以指定版本使用3.8.1

    // 全局安装
    npm install webpack@3.8.1 -g
    // 局部安装
    npm install webpack@3.8.1 --save-dev
 
 
1
2
3
4

注意:如果不全局安装webpack将无法使用webpack命令

局部安装后,package.json文件新增devDependencies中webpack

{
  "name": "webpack_test",
  "version": "1.0.0",
  "devDependencies": {
    "webpack": "3.8.1"
  }
}
 
 
1
2
3
4
5
6
7

测试webpack安装:

控制台在项目目录下输入webpack -v

 
 
1
2

bogon:webpack Brave$ webpack -v
3.8.1
 
 
1
2

显示版本号表示安装成功

---

二,打包文件

1,工程目录webpack下,创建测试js文件, “src/js/entry.js”

webpack 打包文件命令:

    webpack 需要打包的源文件 打包后的输出文件
 
 
1

打包src/js/entry.js到目标地址dist/js/bundle.js的打包命令为:

    webpack src/js/entry.js dist/js/bundle.js
 
 
1

生成dist/js/bundle.js文件和命令行输出:

bogon:webpack Brave$ webpack src/js/entry.js dist/js/bundle.js 

Hash: be2919470dc347bbc22e 

Version: webpack 3.8.1 

Time: 53ms 

    Asset     Size  Chunks             Chunk Names 

bundle.js  2.54 kB       0  [emitted]  main 

   [0] ./src/js/entry.js 69 bytes {0} [built]
 
 
1
2
3
4
5
6
7