Vue.js实战学习笔记------webpack

一.webpack

1. 使用webpack打包后的代码已经不只是你写的代码，其中夹杂了很多webpack自身的模块处理代码。

2.各种格式的文件如.jpg,.less，通过特定的加载器（Loader）编译后，最后统一生成为.js,.css,.png等静态资源文件。

3.在webpack世界里，一张图片，一个css甚至一个字体，都称为模块（module），彼此存在依赖关系，webpack就是来处理模块间的依赖关系的，并把它们进行打包。对于不同的模块，需要用不同的加载器（Loader）来处理，而加载器就是webpack最重要的功能。通过安装不同的加载器可以对各种后缀名的文件进行处理，比如CSS样式，就要用到style-loader和css-loader。

4.在webpack里，可以直接在一个.js文件中导入CSS

import 'src/styles/index.css'，import是ES2015的语法，也可以写成require('src/styles/index.css');

在打包时，index.css会被打包进一个js文件里，通过动态创建<style>的形式来加载CSS样式，当然也可以进一步配置，在打包编译时把所有的CSS都提取出来，生成一个CSS的文件。

5.webpack的主要适用场景是单页面富应用（SPA）。SPA通常是由一个html文件和一堆按需加载的js组成，它的html结构可能非常简单。

6.就是一个js文件而已

归根到底，webpack就是一个.js配置文件，你的架构好或者差都体现在这个配置里，随着需求的不断出现，工程配置也是逐渐完善的。

二.webpack基础配置

（1）安装webpack和webpack-dev-server

（2）在package.json的scripts里增加一个快速启动webpack-dev-server服务的脚本。

{
    "scripts":{ 
        "dev":"webpack-dev-server --open --config webpack.config.js"
    }
}

1）--config是指向webpack-dev-server读取的配置文件路径。

2）--open会在执行命令时自动在浏览器打开页面，默认地址是127.0.0.1:8080，不过IP和端口都是可以配置的

{
    "scripts":{ 
        "dev":"webpack-dev-server --host 172.172.172.1 --port 8888 --open --config webpack.config.js"
    }
}

（3）入口（Entry）和出口（Output）

1）入口的作用是告诉webpack从哪里开始寻找依赖，并编译。

2）出口则用来配置编译后的文件存储位置和文件名。

3）entry中的main就是我们配置的单入口，webpack会从main.js文件开始工作。

4）output中path选项用来存放打包后文件的输出目录，是必填项，publicPath指定资源文件引用的目录，如果你的资源存放在CDN上，这里可以填CDN的网址。filename用于指定输出文件的名称。

（4）webpack-dev-server具有热更新功能，它通过建立一个WebSocket连接来实时响应代码的修改。

（5）加载CSS

1）安装style-loader和css-loader

npm install css-loader --save-dev
npm install style-loader --save-dev

2）在webpack.config.js文件里配置Loader，增加多.css文件的处理

3）在module对象的rules属性中可以指定一系列的loaders，每一个loader都必须包含test和use两个选项。

4）这段配置的意思是说，当webpack编译过程中遇到require（）或import语句导入一个后缀名为.css的文件时，先将它通过css-loader转换，再通过style-loader转换，然后继续打包。

5）use选项的值可以是数组或字符串，如果是数组，它的编译顺序就是从后往前。

（6）插件

1）webpack的插件功能强大而且可以定制。

2）使用一个插件extract-text-webpack-plugin来把散落在各地的CSS提取出来，并生成一个main.css的文件，最终在index.html里通过<link>的形式加载它。（避免CSS通过JS动态创建style标签来写入）

npm install extract-text-webpack-plugin --save-dev

3）然后在配置文件中导入插件，并改写loader的配置：

三.单文件组件（.vue）与vue-loader

（1）.vue单文件组件就是一个后缀名为.vue的文件，在webpack中使用vue-loader就可以对.vue格式的文件进行处理。

（2）一个.vue文件一般包含3部分，即<template>、<srcipt>和<style>

（3）使用.vue文件需要先安装vue-loader、vue-style-loader等加载器并做配置。（同时下载插件，支持ES6语法）

（4）安装完成后，修改配置文件webpack.config.js来支持.vue文件及ES6的解析

1）vue-loader在编译.vue文件时，会对<template>、<srcipt>和<style>分别处理，所以在vue-loader选项里多了一项options来进一步对不同的语言进行配置。比如在对CSS进行处理时，会先通过css-loader解析，然后把处理结果再交给vue-style-loade处理。

2）当你的技术栈多样化时，可以给<template>、<srcipt>和<style>都指定不同多的语言，比如<template lang="jade">和<style lang="less">，然后配置loaders就可以了。

3）在目录下新建一个名为.babelrc的文件，并写入babel的配置，webpack会依赖此配置文件来使用babel编译ES6代码。

（4）每个.vue文件就代表一个组件，组件之间可以互相依赖。

（5）.vue组件是没有名称的，在父组件使用时可以对它自定义。

import App from './app.vue'

四.用于生产环境

（1）安装url-loader和file-loader来支持图片、字体等文件

npm install url-loader --save-dev
npm install file-loader --save-dev

1）当遇到.gif、.png、.ttf等格式文件时，url-loader会把它们一起编译到dist目录下，“？limit=1024”是指如果这个文件小于1kb，就以base64的形式加载，不会生成一个文件。

（2）打包

1）下载两个依赖

npm install webpack-merge --save-dev
npm install html-webpack-plugin --save-dev

2）为了方便开发和生产环境的切换，新建一个用于生产环境的配置文件webpack.prod.config.js。

1.上面安装的webpack-merge模块就是用于合并两个webpack的配置文件，所以prod的的配置是在webpack.config.js基础上扩展的。

2.静态资源再大部分场景下都有缓存（304），更新上线后一般都希望用户能及时地看到内容，所以给打包后的CSS和JS文件的名称都加了20位的hash值，这样文件名就唯一了（main.db3ds89fdsfs.js），只要不对html文件设置缓存，上线后立即就可以加载最新的静态资源。

3.html-webpack-plugin是用来生成html文件的，它通过template选项来读取指定的模版index.ejs，然后输出到filename指定的目录，也就是demo/index_prod.html。模版index.ejs动态设置了静态资源的路径和文件名。代码如下：

4.ejs是一个JS模版库，用来从JSON数据中生成HTML字符串，常用于node.js.

3）编译打包，直接执行webpack命令就可以。在package.json中，加入一个build的快捷脚本来打包

4）最后再终端运行npm run build，等待一会就会完成打包，成功后在demo下会生成一个dist的目录，里面就是打包完的所有静态资源。