webpack一步步实现打包、实时打包操作、打包css\less\scss文件
我们接着这篇博客，来继续学习webpack的相关操作
我先贴出来项目的目录结构：

打包图片

通过npm i url-loader file-loader -D 安装

在images、images放2张同名的图片
在index.html中，加入2行代码

   <div class="box"></div>
   <div class="box2"></div>

在index.scss加上如下代码

.box{
        width: 220px;
        height: 220px;
        // 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了
        background: url('../images/a.jpg');
        background-size: cover;
      }

      .box2{
        width: 250px;
        height: 220px;
        // 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了
        background: url('../images2/a.jpg');
        background-size: cover;
      }

在webpack.config中添加如下url-loade配置、和performance

module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，
            // 大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
        ]
    },
    performance: {
        hints: false
    }

然后npm run dev启动，会渲染出2张图片，以下是渲染的内容：我们看到图片被重命名了

html .box, body .box {
    width: 220px;
    height: 220px;
    background: url(53a478f8-a.jpg);
    background-size: cover;
}

html .box2, body .box2 {
    width: 250px;
    height: 220px;
    background: url(4094d8ed-a.jpg);
    background-size: cover;
}

配置bootstrap字体

首先利用npm i bootstrap@3.3.6 -S 安装bootstrap,我这里是安装的3版本的bootstrap，因为4.xx版本的bootstrap包中没有字体目录主题
布局中填入如下标签

   <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>

然后在index.js中倒入bootstrap样式

import 'bootstrap/dist/css/bootstrap.css'

然后在webpack.config.js中进行配置

        module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，
            // 大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
        ]
    },

babel处理高级JS语法

1.运行npm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
2.运行npm i babel-preset-env babel-preset-stage-0 -D安装babel转换的语法
3.在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：

module: {
        rules: [
           { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
        ]
    },

4.在项目根目录中添加.babelrc文件，并修改这个配置文件如下：

{
    "presets":["env","stage-0"],
    "plugins": ["transform-runtime"]
}

5.我们在index.js中添加新特性语法

class Person {
    // 使用 static 关键字，可以定义静态属性
    // 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
    // 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
    static info = { name: 'safly', age: 20 }
  }

6.执行npm run dev看看效果

webpack打包vue

在webpack 中尝试使用 Vue：
注意： 在 webpack 中， 使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式

回顾 包的查找规则：

// 1. 找 项目根目录中有没有 node_modules 的文件夹
// 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
// 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
// 4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】

1.在index.js中添加

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

var login = {
  template:'<h1>这是login组件</h1>'
}

var vm = new Vue({
  el: '#app',
  data: {
    msg: '123'
  },
  components: {
    login
  }
})

在index.html中添加元素代码

  <div id="app">
        <p>{{msg}}</p>
        <login></login>
    </div>

最后保存编译会在页面上渲染输出

我们获取import Vue还可以通过配置的方式：
在webpack.config.js中添加如下的配置

resolve: {
        alias: { // 修改 Vue 被导入时候的包的路径
            "vue$": "vue/dist/vue.js"
        }
    }

然后在index.js中使用

import Vue from 'vue'

export说明

在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块
ES6中导入模块，使用 import 模块名称 from '模块标识符'
import '表示路径'

在 ES6 中，使用 export default 和 export 向外暴露成员：
var info = {
name: ‘zs’,
age: 20
}

export default info

/* export default {
address: ‘北京’
} */

注意： export default 向外暴露的成员，可以使用任意的变量来接收
注意： 在一个模块中，export default 只允许向外暴露1次
注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员

export var title = '小星星'
export var content = '哈哈哈'

// 注意： 使用 export 向外暴露的成员，只能使用 { } 的形式来接收，这种形式，叫做 【按需导出】
// 注意： export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 {} 中定义
// 注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 {} 按需接收；
// 注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；

import m222, { title as title123, content } from './test.js'
console.log(m222)
console.log(title123 + ' --- ' + content)

webpack打包分离组件.vue文件

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

为了引入.vue文件，安装完vue-loader和vue-template-compiler后，运行报错：
vue-loader was used without the corresponding plugin.Make sure to include VueLoaderPlugin in your webpack config.

百度了一下，是因为vue-loader，15的版本需要再添加plugin的配置。在webpack.config.js添加如下代码：

const { VueLoaderPlugin } = require('vue-loader')
 
module.exports = {
  // ...
  plugins: [
    new VueLoaderPlugin()
  ]
}

进一步优化，我们将模版统一封装到login.vue中

前端代码index.html布局一个标签，内置一个login组件

  <div id="app">
        <p>{{msg}}</p>
        <login></login>
    </div>

在看login.vue，有2个路由切换，

<template>
  <div>
    <h1>这是登录组件，使用 .vue 文件定义出来的</h1>

    <router-link to="/account">Account</router-link>
    <router-link to="/goodslist">Goodslist</router-link>

    <router-view></router-view>
  </div>
</template>

<script>
    export default{
        data(){
             return {
                 msg:"123"
             }
        },
        methods:{
            show(){
                console.info("调用了login.vue中的show方法")
            }
        }
    }
</script>
<style>
</style>

account.vue

<template>
    <div>
        <h1>这是accounts</h1>
        <router-link to="/account/login">登录</router-link>
    <router-link to="/account/register">注册</router-link>

    <router-view></router-view>
    </div>
</template>

<script>
</script>
<style scoped>
div{
    font-style:italic;
}
</style>

goods.vue

<template>
    <div>
        <h1>这是goods</h1>
    </div>
</template>
<script>
</script>
<style>
</style>

s1.vue

 <template>
  <div>
    <h1>s1s1s1s1s1s1s1s1s1s1s1s1s1s1s1VS</h1>
  </div>
</template>


<script>
    
</script>

<style scoped>
    div{
        color:red;
    }
</style>

s2.vue

 <template>
  <div>
    <h1>s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2</h1>
  </div>
</template>


<script>
    
</script>

<style>
    
</style>

然后看下index.js，需要引入vue-router，然后Vue.use(VueRouter)使用，依据vue官网

import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
//倒入loginvue

import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)

import login from './login.vue'
// var login = {
//   template:'<h1>这是login组件</h1>'
// }

import router from './router.js'

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

  // render: c => c(login)
})

router.js

import VueRouter from 'vue-router'

import account from './main/account.vue'
import goodslist from './main/goods.vue'

// 导入Account的两个子组件
import s1 from './sub/s1.vue'
import s2 from './sub/s2.vue'

// 3. 创建路由对象
var router = new VueRouter({
  routes: [
    {
      path: '/account',
      component: account,
      children: [
        { path: 'login', component: s1 },
        { path: 'register', component: s2 }
      ]
    },
    { path: '/goodslist', component: goodslist }
  ]
})

// 把路由对象暴露出去
export default router

然后启动测试效果如下：

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

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

最后贴出代码

login.vue、account.vue、goods.vue、s1.vue、s2.vue省略，上面已经列出
布局文件index.css

li{
    list-style: none;
  }

index.less

ul{
    padding: 0;
    margin: 0;
}

index.scss

html,body{
    margin: 0;
    padding: 0;

    li{
        font-size: 12px;
        line-height: 30px;
    }

    .box{
        width: 220px;
        height: 220px;
        // 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了
        background: url('../images/a.jpg');
        background-size: cover;
      }

      .box2{
        width: 250px;
        height: 220px;
        // 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了
        background: url('../images2/a.jpg');
        background-size: cover;
      }
}

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>

<body>
    <div id="app">
        <p>{{msg}}</p>
        <login></login>
    </div>

    <ul>
        <li>这是第1个li</li>
        <li>这是第2个li</li>
        <li>这是第3个li</li>
        <li>这是第4个li</li>
        <li>这是第5个li</li>
    </ul>

    <!-- <div class="box"></div>
   <div class="box2"></div> -->
    <span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</body>

</html>

index.js

import $ from 'jquery'
import './css/index.css'
import './css/index.less'

import './css/index.scss'
// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'

import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
//倒入loginvue

import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter 
Vue.use(VueRouter)

import login from './login.vue'
// var login = {
//   template:'<h1>这是login组件</h1>'
// }

import router from './router.js'

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

  // render: c => c(login)
})


$(function () {
    $('li:odd').css('backgroundColor', 'yellow')
    $('li:even').css('backgroundColor', function () {
      return '#' + 'D97634'
    })
  })

  class Person {
    // 使用 static 关键字，可以定义静态属性
    // 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
    // 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
    static info = { name: 'safly', age: 20 }
  }
  console.log(Person.info)

.babelrc

{
    "presets":["env","stage-0"],
    "plugins": ["transform-runtime"]
}

webpack.config.js

const path = require('path')
//启用热更新
const webpack = require('webpack')
var htmlWebpackPlugin = require('html-webpack-plugin');

const { VueLoaderPlugin } = require('vue-loader')

module.exports = {
    // entry:path.join(__dirname,'./src/index.js'),
    // output:{
    //     path:path.join(__dirname,'./dist'),
    //     filename:'index.js'
    // },
    mode: 'production',
    plugins: [ // 添加plugins节点配置插件
        new htmlWebpackPlugin({
            template: path.resolve(__dirname, 'src/index.html'),//模板路径
            filename: 'index.html'//自动生成的HTML文件的名称
        }),
        new webpack.HotModuleReplacementPlugin(),//new一个热更新
        new VueLoaderPlugin()

    ],
    devServer: {
        open: true,
        port: 3100,
        contentBase: 'src',
        hot: true
    },
    //这个节点用于配置所有的第三方模块加载器
    module: {
        rules: [
            { test: /\.css$/, use: ['style-loader', 'css-loader'] },
            { test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
            { test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
            // limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，
            // 大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
            { test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' }, // 处理 图片路径的 loader
            { test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' }, // 处理 字体文件的 loader 
            { test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // 配置 Babel 来转换高级的ES语法
            { test: /\.vue$/, use: 'vue-loader' } 
           
        ]
    },
    performance: {
        hints: false
    }
} 

package.json

{
  "name": "webpack_study",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "dev": "webpack-dev-server"
  },
  "keywords": [],
  "author": "",
  "license": "ISC",
  "dependencies": {
    "jquery": "^3.3.1",
    "vue": "^2.5.17",
    "vue-router": "^3.0.1"
  },
  "devDependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-plugin-transform-runtime": "^6.23.0",
    "babel-preset-env": "^1.7.0",
    "babel-preset-stage-0": "^6.24.1",
    "bootstrap": "^3.3.6",
    "css-loader": "^1.0.0",
    "file-loader": "^2.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.8.1",
    "less-loader": "^4.1.0",
    "node-sass": "^4.9.4",
    "sass-loader": "^7.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^1.1.2",
    "vue-loader": "^15.4.2",
    "vue-template-compiler": "^2.5.17",
    "webpack": "^4.20.2",
    "webpack-cli": "^3.1.2",
    "webpack-dev-server": "^3.1.9"
  }
}