Vue学习笔记6——Webpack 案例讲解

项目地址：

https://github.com/masterzz/webpack-demos

一、环境准备

由于npm国外镜像太慢，用cnpm代替npm处理，安装cnpm：

npm install -g cnpm --registry=https://registry.npm.taobao.org

首先，全局安装webpack

npm i -g webpack webpack-dev-server

这里会遇到第一个坑
需要通过@确定版本
npm i -g [email protected] [email protected]

为了加快安装速度，可以先安装cnpm：
npm install -g cnpm --registry=https://registry.npm.taobao.org
之后可以用cnpm代替npm进行操作
注意这个webpack-dev-server是用来做自动打包编译的工具
-g 表示安装到全局，使用了这个参数之后，可以当做命令行工具使用
对于webpack-dev-server再说明一点:
webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有存放到 实际的 物理磁盘上；而是，直接托管到了 电脑的内存中，所以，我们在 项目根目录中，根本找不到 这个打包好的 bundle.js;

之后进入到如下目录

cd webpack-demos

下载module

npm install

进入到相应demo，并启动

cd demo01

npm run dev

二、Webpack讲解

1，基本说明

Webpack is a front-end tool to build JavaScript module scripts for browsers.

webpack是一个前端工具，用来给浏览器建立js模块的脚本。  

它和Browserify很像，但功能强大得多

Webpack needs a configuration file called webpack.config.js which is just a CommonJS module.

Webpack需要一个配置文件webpack.config.js 

来看看这个文件的结构：

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

这个文件里的module.exports 是node.js 的语法，所以说webpack是基于node构建的，entry是入口，output是出口

如果没有这个文件，可以这么写：webpack file  file

第一个file就是entry，第二个file就是output

After having webpack.config.js, you can invoke Webpack without any arguments.

配置好这个文件之后，不用参数就可以启动webpack（启动万之后，它会按照entry和output输出相关内容）：

$ webpack

其实比较麻烦就在这一步，经常会让你装一个webpack-cli的东西。如果安装webpack时加了版本信息，这个坑可以过掉。这是因为webpack到了新版本（4）它的cli和服务是要分开安装的。

2，命令行参数及json配置

Some command-line options you should know.

你该知道的一些命令行参数（选项）：

• webpack – building for development
• webpack -p – building for production (minification 压缩版)
• webpack --watch – for continuous incremental building
• webpack -d – including source maps
• webpack --colors – making building output pretty

You could customize scripts field in your package.json file as following.

你可以定制脚本字段，在package.json文件：

// package.json
{
  // ...
  "scripts": {
    "dev": "webpack-dev-server --devtool eval --progress --colors",
    "deploy": "NODE_ENV=production webpack -p"
  },
  // ...
}

三、案例讲解

1，demo1  Entry file

Entry file is a file which Webpack reads to build bundle.js.

For example, main.js is an entry file.

这个案例比较简单，在demo1里直接输入webpack，它会在bundle.js里生成相关代码。（当然可以直接npm run dev）

演示的核心部分就是这个entryfile，通过它可以规定从什么文件生成到什么文件。

webpack的用处（如果有调用其他js可以看得更加明显）：

1. webpack 能够处理 JS 文件的互相依赖关系；
2. webpack 能够处理JS的兼容问题，把 高级的、浏览器不是别的语法，转为 低级的，浏览器能正常识别的语法

// main.js
document.write('
Hello World
');

index.html

Webpack follows webpack.config.js to build bundle.js.

// webpack.config.js
module.exports = {
  entry: './main.js',
  output: {
    filename: 'bundle.js'
  }
};

Launch the server, visit http://127.0.0.1:8080 .

$ cd demo01
$ npm run dev

 

2，demo2 Multiple entry files