webpack

webpack

本质上，webpack 是一个用于现代 JavaScript 应用程序的静态模块打包工具。当 webpack 处理应用程序时，它会在内部构建一个 依赖图(dependency graph)，此依赖图包含着应用程序所需的每个模块，然后将所有模块打包为一个或多个 bundle（通常只有一个）。

优点： 当浏览器发起请求时，bundle能最大程度地减少应用的等待时间。

webpack的plugin插件：

1）添加版权的plugin：作用是在打包生成的输出文件的上面加一段类似下图的注释；

配置：在webpack.config.js中加上const webpack = require("webpack")；表示从node_modules中导入webpack; 然后添加上plugins相关的配置。然后，重新npm run build即可。

2）打包html文件、index.html
项目打包时，有一些html文件也需要进行打包发布，HtmlWebpackPlugin就是起这个作用的；安装 ：npm install html-webpack-plugin --save-dev；在webpack.config.js中进行相应的配置；

3）压缩js文件的plugin：
项目上线的时候，需要将js文件进行压缩，压缩主要做两件事情，一个是将多余的空格去掉，一个是将变量名用简单的符号进行代替，这样可以缩小文件的体积。

第一步：安装uglifyjs-webpack-plugin: npm install uglifyjs-webpack-plugin@1.1.1 --save-dev;
第二步：在webpack.config.js中进行配置；中心打包后，就会发现bundle.js已经被压缩了；

一、为什么选择webpack？

在打包工具出现之前，如何在web中使用JS？
在浏览器中运行JS有两种方法：

1. 引用一些脚本来存放每个功能；此方法很难扩展，因为加载太多脚本会导致网络瓶颈；
2. 使用一个包含所有项目代码的大型.js文件，但是这会导致作用域、文件大小、可读性和可维护性方面的问题。

与 Node.js 模块相比，webpack 模块能以各种方式表达它们的依赖关系。

• ES2015—— import 语句
• CommonJS—— require() 语句
• AMD ——define 和 require 语句
• css/sass/less 文件中的 @import 语句
• stylesheet url(…) 或者 HTML 文件中的图片链接。

二、webpack介绍

webpack：前端模块化打包工具（模块和打包）

打包： 根据文件间的依赖关系对其进行分析，然后将这些模块按指定规则生成静态资源；当 webpack 处理程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle；

• webpack支持模块化，可以将AMD，CMD，CommonJS，ES6，less、scss、typeScript转化为浏览器能识别的代码（JS（ES5）、CSS）。
• 处理模块之间的依赖关系（export和import），文件压缩合并、预处理等功能；

三、webpack安装

npm install webpack@3.6.0 -g  全局
npm install webpack@3.6.0 --save -dev 局部安装 

• webpack要想使用，是依赖于node环境的；node.js自带软件包管理工具npm（node packages manager）
• webpack进行模块化打包，最终生成一个文件夹dist，将文件夹放在服务器中进行部署。 (src文件中存开发时写的源码)

四、webpack中使用JS文件的配置

index.html中引用main.js文件

<script src="./src/main.js"></script>

直接引用main.js，可以会出现问题，因为main.js中可能引用了common JS或者ES6的模块化规范，浏览器不能识别，那么可以使用webpack

// 使用webpack工具将./src/main.js打包为./dist/bundle.js
webpack ./src/main.js ./dist/bundle.js
// 如果main.js中引用了其他文件，也不用去管，
// webpack已经帮我们处理了依赖关系
// 我们在index.html中引用
<script src="./dist/bundle.js"></script> // 即可

• 和index.html文件同一层，新建一个webpack.config.js：写入入口文件和打包文件，之后输入webpack就可以生成打包文件了，不需要再输入webpack ./src/main.js ./dist/bundle.js；注意这里输入webpack使用的是全局的webpack；使用npm run build使用的是本地的webpack
  
• 使用npm init初始化，生成package.json文件，package.json文件和webpack.config.js文件属于同一层；package.json文件放入需要使用的依赖配置

五、开发时依赖和运行时依赖

npm install xx@xx  --save -dev 开发时依赖

六、webpack中使用css文件的配置

• loader是webpack中一个非常核心的概念；webpack可以处理js代码，和js之间的依赖；
• 但是加载css、图片；ES6和TypeScript转为ES5代码，将scss和less转为css，将.jsx、.vue文件转成js文件等等；对于webpack本身的能力，对于这些转化是不支持的；所以可以使用webpack扩展对应的loader就可以了；

在index.html中不要引用css，直接将css也打包进bundle文件中，由于入口文件是main.js文件，main.js没有引用css文件，所以打包时不会打包css文件；

解决办法：在main.js中文件：require ("./css/normal.css")，之后重新打包（会报错，需要安装css-loader、save-loader）

loader使用：

npm install css-loader --save -dev 
// 负责将css文件进行加载
npm install style-loader --save -dev
// 负责将样式添加到DOM中

七、webpack中使用less文件的配置

在xx.less文件中写入样式，在main.js中require（"./css/xx.less")
npm run bulid：重新打包，会发生错误；

解决办法：安装less-loader、less进行配置

八、当CSS文件中使用了图片

当CSS文件中使用了图片，那打包文件的时候会报错；需要安装一个url-loader

background：url("../css/xx.jpg")

大于limit的图片需要进行打包：在webpack.config.js中加上publicPath，之后使用到url的文件都会在url前面加上dist/

此时再运行npm run bulid；页面刷新就可以出背景图片了。
为了不使生成的图片太乱，可以在dist文件夹下再创建一个文件夹img，可以这样配置：

之后进行打包，运行npm run build

九、webpack-ES6转化为ES5的babel

安装babel-loader，babel-core：

cnpm install --save-dev babel-loader@7 
babel-core babel-preset-es2015

十、引用vue.js

npm install vue --save  运行时也需要vue，所以不加-dev

// main.js文件中：
import Vue from "vue"
const app = new Vue({
    el: "#app",
    data() {
        return {
            name: "chai",
            age: 18
        }
    }
})

vue有两个版本：

• runtime-only：代码中不可以任何的template
• runtime-compiler：代码中，可以有template，因为compiler可以来编译template

解决办法：
在配置文件中加一个属性：resolve，在main.js文件中：import Vue from ‘vue’，这里的vue指的就是’vue/dist/vue.esm.js’文件

这样，就会在node_modules文件夹下找到vue/dist/vue.esm.js文件（使用routime-compiler）（不加的话，默认使用vue.routime.js文件）

十一、el和template之间的关系

在main.js中的实例中加上template（模板中写上浏览器要展示的标签）


运行时，会用template中的内容，将el对应的元素替换掉

十二、vue终极使用

vue-template-compiler可以将template编译为render函数
vue-loader：加载文件

• 新建一个文件夹
  

• 在其他组件中引用
  

• main.js文件

import App from "./vue/App.vue"
new Vue({
    el: "#app",
    template: "<App/>",
    components: {App}
})

注意： 这样做的前提是安装一些东西：

cnpm install --save-dev vue-loader@13.0.0 
vue-template-compiler@2.6.12

注意：

在配置文件中加入下面属性，在引用import Cpn from ‘./vue/Cpn’ 就可以不用加.vue或者.js了

• 以前：import Cpn from ‘./vue/Cpn.vue’
• 现在：import Cpn from ‘./vue/Cpn’
  
  resolve解决路径问题和扩展名的问题

十三、plugin插件的使用