webpack

webpack

• 认识webpack
• webpack的安装
• webpack的起步
• webpack的配置
• loader的使用
• webpack中配置Vue
• plugin的使用
• 搭建本地服务器

什么是webpack？

• webpack是一个现代的JavaScript应用的静态模块打包工具

• 官网： https://webpack.js.org/
  

• 目前使用前端模块化的一些方案：AMD、CMD、CommenJS、ES6。

• webpack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的依赖关系

• 和grunt/gulp的对比

  • grunt/gulp的核心是Task

    • 我们可以配置一系列的 task，并且定义task要处理的事务（例如ES6、ts转化，图片压缩，scss转成css）
    • 之后让grunt/gulp来依次执行这些task，而且让整个流程自动化。
    • 所以grunt/gulp也被称为前端自动化任务管理工具。

  • 什么时候用grunt/gulp呢？

    • 如果工程模块依赖非常简单，甚至是没有用到模块化的概念。
    • 只需要进行简单的合并、压缩，就使用grunt/gulp即可。
    • 但是如果整个项目使用了模块化管理，而且相互依赖非常强，我们就可以使用更加强大的webpack了。

  • grunt/gulp和webpack的不同

    • grunt/gulp更加强调的是前端流程的自动化，模块化不是它的核心。
    • webpack更加强调模块化开发管理，而文件压缩合并、预处理等功能，是它附带的功能。

webpack的安装

• 安装webpack首先需要安装Node.js，Node.js自带了软件包管理工具npm
• 查看自己的node版本 命令：node -v
  
• 全局安装webpack（这里指定版本号3.6.0，因为vue cli2 依赖该版本）命令：npm install webpack@3.6.0 -g
• 局部安装webpack 命令：npm install webpack@3.6.0 --save-dev
• 为什么全局安装后，还需要局部安装呢？
  • 在终端直接执行webpack命令，使用的是全局安装的webpack
  • 当在package.json中定义了scripts时，其中包含了webpack命令，那么使用的是局部webpack

webpack的使用

• 将main.js 文件进行打包

  • 目录结构
    
  • 在webpack.config.js文件下配置 （关键代码）

• webpack对css、less文件、以及图片文件的处理

  • 在打包前需要很多的loader，什么是loader？

    • loader是webpack中一个非常核心的概念。
    • 在开发中不仅仅有基本的js代码处理，也需要加载css、图片、也包括一些高级的将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等。
    • 对于webpack本身的能力来说，对于这些转化是不支持的，所以要借助webpack扩展对应的loader来实现。

  • loader的使用过程：

    • 步骤一：通过npm安装需要使用的loader
    • 步骤二：在webpack.config.js中的modules关键字下进行配置
    • 大部分loader都可以在webpack的官网中找到，并且有对应的用法

  • 安装loader（以css-loader为例） 命令 npm install --save-dev css-loader

  • 相应的loader版本，及其配置（安装完成后，在package.json文件中可以查看）

  • css-loader 的配置规则
    

• ES6转ES5

  • 为了更好的适应浏览器，需要将ES6的代码转为ES5的代码。const被var替代。
  • 安装相关的loader 命令：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
  • 配置webpack.config.js文件
    

• webpack中引用Vue

  • 安装vue 命令：npm install vue --save
  • 安装vue相关的loader 命令：npm install vue-loader vue-template-compiler --save-dev
  • 配置webpack.config.js文件
    
  • 注意：只引用import Vue from 'vue',创建实例时，运行后，浏览器会报不能编译模板的错误。
    • runtime-only 代码中，不可以有任何的template
    • runtime-compiler 代码中，可以有template，因为有compiler可以用于编译template
    • 解决方案：在webpack.config.js文件中引入vue.esm.js文件

• Vue的最终使用方案

  • 建立App.vue文件，（相当于一个组件构造器，最后在main.js文件下进行注册使用），.vue文件下也可以注册其他的组件。
  • 在main.js文件中导入vue文件，并注册组件，就可以使用了。
    
  • app.vue文件模板

<template>
    <div>
            <h2 class="title">{{message}}sun</h2>
            <button @click="btnclick">按钮</button>
            <Cpn/>
    </div>
</template>

<script>
    import Cpn from "./Cpn"
    export default {
        name:"app",
        data(){
            return{
                message:"hello word"
            }
        },
        methods:{
            btnclick(){
                console.log("你好呀")
            }
        },
        components:{
            Cpn
        }
    }
</script>
<style scoped>
    .title{
        color:yellow
    }
</style>