创建项目目录

切换到项目目录运行命令 npm init -y 初始化项目
npm init -y

在跟目录创建 src 目录，在 src 目录创建 index.html 文件和 main.js 文件

安装 webpack 所需依赖

 // 在webpack 3中，webpack本身和它的CLI以前都是在同一个包中，但在第4版中，他们已经将两者分开

  cnpm i webpack -D
  cnpm i webpack-cli -D

// 当我们在控制台，直接输出 webpack 命令的执行的时候 webpack 做了一下几步
// 1.首先，webpack 发现，我们并没有通过命令的形式，给他指定出口和入口
// 2.webpack 就会去 项目的根目录中，查找一个叫做“webpack.config.js”的配置文件
// 3.当找到配置文件后，webpack 回去解析执行这个配置文件 ，当解析执行完成配置文件后，就得到了，配置文件中，导出配置对象
// 4.当webpack 拿到 配置对象后，就拿到了 配置对象中指定的入口和出口，然后进行打包构建；

在项目根目录创建 webpack.confing.js 并配置以下信息

// webpack 是基于 node.js 构建的所以可以再配置文件中使用一切 node 语法
const path = require('path')

module.exports = {
    // 设置打包的入口文件，表示要打包的文件
    entry: path.join(__dirname, './src/main.js'),
    output: {
        // 指定打包输出的文件路径 ， 打包时 webpack 会帮我们自动创建 dist 目录
        path: path.join(__dirname, './dist'),
        // 指定输出文件的  文件名
        filename: 'bundle.js'
    }
}

使用 webpack 命令就可以实现打包，会自动创建 dist 目录，并在目录下生成 bundle.js

image.png

使用 webpack-dev-serve 工具 来实现自动打包编译的功能

1. 运行 npm i webpack-dev-server -D 把这个工具安装到项目的本地开发依赖
2. 安装完毕后，这个工具的用法 和 webpack 命令的用法，完全一样
3. 由于，我们是在项目中，本地安装的 webpack-dev-server,所以无法把它当做 脚本命令，在终端运行，（只有那些安装到 全局 - 
     g 的工具，才能在终端运行）
4. 注意： webpack-dev-server 这个工具要想正常运行，要求 在本地项目中，必须安装  webpack 
5. webpack-dev-server 帮我们打包生成的 bundle.js 文件，并没有 存放到实际的物理磁盘上，而是，直接托管到了电脑的内存 
    中，所以我们在项目的根目录找不到这个bundle.js
6. 我们可以认为，webpack-dev-server 把打包好的文件，以一种虚拟的形式，托管到了咱们的项目根目录中，虽然我们看不到， 
    但是，可以认为，和 dist src node_modules 平级
   有一个看不见的文件叫做 bundle.js

配置 webpack-dev-server

1.配置 dev-sever 第一种方式,在 package.json 文件的 scripts dev 节点配置

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server --open --port 8000 --contentBase src --hot"
  },
   --open 启动自动打开浏览器 --port 8000 指定启动端口 --contentBase src 指定默认加载的目录 --hot  
   -- host 指定ip 访问
   热更新 不会重新生成 bundle.js 只会加载更新的部分

2.配置 dev-sever 第二种方式 相对来说这个方式更麻烦一些 不推荐
在 webpack.config.js output同级添加 devServer 节点

           devServer:{
              open: true,           // 自动打开浏览器
               port: 3000,           // 设置启动时候的运行端口
               contentBase: 'src',   // 指定托管的根目录
               hot: true             // 启动热跟新步骤 1
           },
           plugins;[  // 配置插件的节点
               new webpack.HotModuleReplacementPlugin() // new 一个热更新的模块对象   这是启动热更新的 步骤 3
           ]
           // 启动热更新步骤 2  引入webpack
           const webPack = require('webPack')

这个时候就可以使用 npm run dev 命令来启动项目

配置 html-webpack-plugin 插件

安装命令
cnpm i html-webpack-plugin -D

在内存中生成 HTML 页面的插件
只要是插件 都一定要放到 plugins节点中去
这个插件的两个作用
1.自动在内存中生成一个指定页面的
2.自动把打包好的bundle.js追加到内存页面中去

在 webpack.config.js 中配置
const htmlWebpackPlugin = require("html-webpack-plugin")
module.exports = {
    // 需要手动设置 入口 和 出口
    entry:path.join(__dirname,'./src/main.js'), // 入口，表示，使用 webpack 打包那个文件
    output:{
        path: path.join(__dirname,'./dist'), // 指定 打包好的文件 ，输出到那个目录去
        filename: 'bundle.js'  // 这是指定  输出的文件名称
    },
    plugins:[
        new htmlWebpackPlugin({  // 创建一个在内存中生成  HTML 页面插件
            template: path.join(__dirname,'./src/index.html'), // 指定 模板页面，将来会根据指定的页面路径，去生成内存中的页面
            filename: 'index.html' // 指定生成的页面名称
        })   
    ]
}

加载样式文件 .css .less .scss

在 src 目录下 创建 样式文件

image.png

在 main.js 文件中引入创建的 css 文件

import './css/index.css'
import './css/index.less'
import './css/index.scss'

// 使用 import 引入 css 样式表
// 注意： webpack 默认只能打包处理 JS 类型的文件，无法处理 其他的非 JS 类型的文件
// 如果需要处理非 JS 文件，我们需要手动安装一些第三方的 loader 加载器
// 1.如果想要打包处理 css 文件，需要安装 npm i style-loader css-loader -D
// 2.打开 webpack.config.js 这个配置文件，在里面，新增一个配置节点，叫做 module,他是一个对象
//   这个 module 对象上，有个 rules 属性，这个 rules 属性是个数组，这个数组中，存放了，所有第三方文件的匹配和处理规则

// 注意： webpack 处理第三方文件类型的过程：
// 1. 发现这个要处理的文件不是 js 文件时，然后去配置文件中查找有没有对应的第三方 loader 规则
// 2. 如果能够找到对应的规则，在会调用对应的 loader 处理这种类型的文件
// 3. 在调用 loader 的时候，是从后往前调用的
// 4. 当最后一个 loader 调用完毕，会把处理的结果，直接交给 webpack 进行打包合并，最终输出到 bundle.js 中去

// 打包 css 文件
// cnpm i style-loader css-loader -D

// 打包安装 less 文件
// 安装 cnpm i less-loader -D 加载器
// 安装 cnpm i less -D 

// 打包 scss 文件
// 安装 cnpm i sass-loader -D
// 安装 cnpm i node-sass -D 

在 webpack.config.js 文件 module.exports 中添加 module 节点

    module:{      // 这个节点，用于配置所有的第三方模块加载器
        rules:[   // 所有第三方模块的匹配规则
            {test: /\.css$/,use:['style-loader','css-loader']}, // 配置处理第三方处理 css 文件的插件
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']},  // 配置处理 less 文件
            {test: /\.scss/,use:['style-loader','css-loader','sass-loader']}  // 配置处理 scss 文件
        ]
    }

在页面引入 bootstrap 字体文件，注意这里安装的是 bootstrap3,bootstrap4.0 要单独下载字体文件

安装 bootstrap3 依赖
cnpm i bootstrap@3 -S

安装加载字体文件的 loader 
cnpm i file-loader url-loader -D

在 webpack.config.js 文件中配置加载器
module:{  // 配置所有第三方 loader 加载器
        rules:[
            {test:/\.css$/, use:['style-loader','css-loader'] }, // 加载 css 文件
            {test:/\.less$/, use:['style-loader','css-loader','less-loader']}, // 加载 less 文件
            {test:/\.scss$/, use:['style-loader','css-loader','sass-loader']}, // 加载 scss 文件
            {test: /\.(ttf|woff2|woff|eot|svg|dtd)$/,use: 'url-loader'}, // 加载字体文件
        ]
    }

在 main.js 文件中引入 bootstrap css 文件
import 'bootstrap/dist/css/bootstrap.min.css'

在页面引入字体图标就可以了
<span class="glyphicon glyphicon-search" aria-hidden="true"></span>

加载图片文件

在样式文件中引入图片文件
.box{
    width: 200px;
    height: 200px;
    background-color: blue;
    /* 默认情况下，webpack 无法处理 css 文件中的 url 地址，不管是图片还是 字体库，只要是 URL 地址，都处理不了 */
    /* 需要两个 loader 加载器  cnpm i url-loader file-loader -D */
    background: url(../images/xxx.jpg);
    background-size: cover;
}

    module:{   // 配置所有第三方 loader 规则
        rules:[   // 第三方模块的匹配规则
            {test: /\.css$/,use:['style-loader','css-loader']}, // 处理css文件
            // 处理 less 文件
            {test: /\.less$/,use:['style-loader','css-loader','less-loader']},
            // 处理 sass 文件
            {test: /\.scss$/,use:['style-loader','css-loader','sass-loader']},
            // 处理 url 文件
            // limit 给定的值是图片的大小，单位是 byte 如果我们引用的图片大于或等于给定的的 limit 值，则不会转为 base64 格式的字符串，如果图片小于给定的 limit
            // 的值，则会被转为 base64 的字符串,name=[name] 代表打包的名字和原始名字一样 [ext] 代表打包的后缀名和原始后缀名一样
            // [hash-8] 为了防止重名生成 8 位哈希值
            {test: /\.(jpg|png|gif|bmp|jpeg)$/,use:'url-loader?limit=40,206&name=[hash:8]-[name].[ext]'}, // 处理图片路径
        ]
    }

配置babel 来转换高级的 Es6 语法

在 main.js 文件中添加 ES6 语法

// class 关键字，是 Es6 中提供的新语法，使用来 实现 Es6 中面向变成的方式
class Persion {
    // 使用 static 关键字，可以定义静态属性
    // 所谓的静态属性，就是可以直接可以使用类名，直接访问属性
    // 实例属性： 只能通过类名的实例，来访问的属性，叫做实例属性
    static info = { name: "张三", age: 15 }
}

// 访问 Persion 类的静态属性
console.log(Persion.info)

运行程序会报无法解析错误

ERROR in ./src/main.js 14:16
Module parse failed: Unexpected token (14:16)
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. See https://webpack.js.org/concepts#loaders
|     // 所谓的静态属性，就是可以直接可以使用类名，直接访问属性
|     // 实例属性： 只能通过类名的实例，来访问的属性，叫做实例属性
>     static info = { name: "张三", age: 15 }
| }

// 在 webpack 中 ，默认只能处理一部分 ES6 的新语法，一些更新高级 的 Es6 语法或者 Es7 语法，webpack 是处理不了的，这时候就需要
// 借助第三方 loader 来帮助 webpack 处理这些高级的语法，当第三方 loader 把高级语法转换为低级语法之后，会把结果交给 webpack 去
// 打包到 bundle.js 中

通过 babel ，可以帮我们将 高级语法 转为 低级语法
1. 在 webpack 中，可以运行如下两套命令，安装两套包，去安装 babel 相关的 loader 功能
  1.1 第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
  1.2 第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
2. 打开 webpack 的配置文件 在 model 节点下 rules 数组中，添加一个新的匹配规则
  2.1 {test:"/\.js$/",use:"babel-loader",exclude:/node_modules/}
  2.2 注意：在配置 babel 的 loader 规则的时候，必须把 node_modules 目录，通过 exclude 选项排除掉，原因有两：
     2.2.1 如果不排除 node_modules 则 babel 会把 node_modules 中所有的 第三方 js 文件 都打包好编译，这样会非常消耗 CPU 
              同时，打包速度也会非常慢
     2.2.2 哪怕，最终 buble 把所有 node_modules 中的 js 转换完毕了，但是，项目也无法正常运行！！！
3. 在项目的根目录中 创建一个 叫做 .babelrc 的 babel 配置文件，这个配置文件，属于 JSON 格式 ，所以 在写 .babelrc 配置的时 
    候，必须符合 json 的
    语法规范：不能写注释，字符串必须使用双引号
 {
     "persets":["env","stage-0"],
     "plugins":["transform-runtime"]
 }
4. 了解： 目前，我们安装的 babel-preset-env 是比较新的 ES 语法，之前，我们安装的是 babel-preset-es2015 现在，出了一个 
    更新的语法插件叫做
    babel-preset-env, 它包含了所有的 和 es... 相关的语法

安装 babel 所需依赖（注意：如果出现版本过高问题，切换至低版本即可）

安装第一套包
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D

安装第二套包
cnpm i babel-preset-env babel-preset-stage-0 -D

打开 webpack.config.js 的配置文件 在 model 节点下 rules 数组中，添加一个新的匹配规则
{test:/\.js$/, use:['babel-loader'],exclude: /node_modules/} // 配置 babel 来装换 es6 高级语法,并排除 node_modules 文件夹

在根目录创建 .babelrc 文件,由于是 json 文件 不许符合 json 的语法，不能写注释！！！
{
    "plugins":["transform-runtime"],
    "presets":["env","stage-0"]
}

在 webpack 中尝试使用 Vue

// 在 webpack 中尝试使用 Vue
// 注意： 在 webpack 中，使用 import Vue form 'vue' 导入的 Vue 构造函数，功能是不全的，只提供了 runtime-only 的方式
//       并没有提供 向网页中那样使用方式
 import Vue from 'vue'

方式一 ，使用导包方式 不推荐

import Vue from '../node_modules/vue/dist/vue.js'

方式二： webpack.config.js 配置文件中的 module.exports 节点添加以下节点

 resolve:{
    alias:{ // 修改 vue 导包时的路径
        "vue$":"vue/dist/vue.js"   // 这个和方式一引用的路径一样  node_modules 可以省略
     }
 }

webpack 中打包 .vue文件

1.安装vue包 cnpm i vue -S
2.默认 webpack 无法打包 .vue 文件 需要安装 相关的 loader
3.cnpm i vue-loader vue-template-compiler -D
4.在配置文件中，新增 loader 配置项 {test:/.vue$/,use:'vue-loader'}

安装 vue 的包

cnpm i vue -S

安装打包所需依赖

cnpm i vue-loader vue-template-compiler -D

打开 webpack.config.js 的配置文件 在 model 节点下 rules 数组中，添加一个新的匹配规则

{test:/\.vue$/,use:'vue-loader'}    // 加载 .vue 文件

创建 .vue 文件

.vue 文件 三要素：
1.template
2.script
3.style

<template>
    <div>
        <h1>使用.vue文件定义出来的组件---{{ msg }}</h1>
    </div>
</template>
<script>
    export default{
        data(){
            return {msg:"刘德华"}
        },
        methods:{
            show(){
                console.info("调用了 login.vue 中的show方法")
            }
        }
    }
</script>

<style>

</style>

main.js 中引入创建的 login.vue 组件

import login from './login.vue'

var vm =  new Vue({
    el: '#app',
    data:{
        msg:'来自vue的实例'
    },
     components:{
         login: login  // 挂载组件
     }
})

这样就可以再页面引用组件了

    <div id="app">
        <login></login>
    </div>

使用 vue 实例的 render 函数渲染组件（注意：render 函数 return 的结果会替换页面中 el 指定的那个容器）

var vm =  new Vue({
    el: '#app',
    data:{
        msg:'来自vue的实例'
    },
     render:function(createElements){
         return createElements(login)
     }
})

render 函数的简写方式

var vm =  new Vue({
    el: '#app',
    data:{
        msg:'来自vue的实例'
    },
    render:c => c(login) 
 // 在 webpack 中 如果想要通过 vue 把一个组件放到 页面中去展示，vm 实例中的 render 函数可以实现
})

总结梳理： webpack 中如何使用 vue:

总结梳理： webpack 中如何使用 vue:
1.安装 vue 的包： cnpm i vue -S
2.由于在 webpack 中，推荐使用 .vue 这个组件模板文件来定义组件，所以，需要安装 能解析这种文件的 loader  
   cnpm i vue-loadre vue-template-complier -D
3.在 main.js 中，导入 vue 模块， import Vue from 'vue'
4.定义一个 .vue 结尾的组件，其中，组件有三部分组成  template script style
5.使用 import login form './login.vue' 导入组件
6.创建 vm 的实例 var vm = new Vue({el:"#app",render: c => c(login)}) 
7.在页面中创建一个 id 为 app 的 div 元素，作为 vm 实例要控制的区域