vue-webpack

webPack

• 什么是webPack，从本质上讲webPack是一个现代的JavaScript应用的静态模块打包工具
• 前端模块化的一些方案：AMD、CMD、CommonJS、ES6
• webPack其中一个核心就是让我们可能进行模块化开发，并且会帮助我们处理模块间的关系
• 而且不仅仅是JavaScript文件，我们的css、图片、json文件等等在webPack中都可以被当作模块来使用
• 将webPack中的各种资源模块进行打包合并成一个或多个包（bundle）
• 在打包的过程中，还可以对资源进行处理，比如压缩图片，将scss文件转成css，将ES6语法转成ES5语法，将typescript转成javascript等等操作

grunt/gulp的对比

• grunt/gulp的核心是Task
  我们可以配置一系列task，并且定义task要处理的任务
  之后让grunt/gulp来一次执行这些task，而且让整个流程自动化
  所以grunt/gulp也被称为前端自动化任务管理工具

• 我们来看一个gulp的task
  下面的task就是将src下面的所有js文件转成ES5的语法
  并且最终输出到dist文件夹中

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

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

webpack的安装

必须依赖node环境
node为了可以正常执行很多代码，必须其中包含各种依赖的包npm工具(node packages manger)

• 安装webpack首先需要安装node.js，Node.js自带了软件包管理工作npm
• 查看自己的node状态， node -v
• 全局安装webpack： npm install webpack@3.6.0 -g
• 局部安装webpack：
  cd 到对应的目录
  npm install webpack@3.6.0 --save-dev

文件和文件夹解析

dist文件夹：用于存放之后打包的文件
src文件夹：用于存放我们写的源文件

• main.js :项目的入口文件
• index.html: 浏览器打开展示的首页面
• package.json： 通过npm init生成的，npm包管理的文件（暂时没有用上，）

模块化

导入和导出
早期

//aaa.js 导出
moduleA = (function(){
   
	obj = {
   };
	var flag =false;
	function sum(){
   }
	obj.flag = flag;
	obj.sum = sum;
	return obj
})()

//bbb.js
console.log(moduleA.flag )//相当于导入

commonjs

//aaa.js文件
//导出
modlue.exports ={
   
	flag:true,
	test(a,b){
   }
}

//导入
let {
   test,demo,flag}=require('./aaa.js')

es6

export flag =true;
export function sum(){
   }

export class person{
   }

或
export{
   flag，sum}

import{
   flag,sum}from './aaa.js'

直接webpack不用指明路径的配置

需要在工程路径下简历一个文件webpack.config.js文件，配置；

• entry: 文件的输入路径
• output：文件的输出路径

const path = require('path')
module.exports = {
   
    entry: './src/main.js',
    output: {
   
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js",
    },
}

path是一个node库，如果需要是用需要执行npm init

package.json中定义启动

我们可以在package.json中的scripts中定义自己的执行脚本

简化执行命令，在scripts对象中配置
如：“build”:“webpack”

{
   
  "name": "meetwebpack",
  "version": "1.0.0",
  "description": "",
  "main": "webpack.config.js",
  "scripts": {
   
    "test": "echo \"Error: no test specified\" && exit 1",