Vue - Webpack

---

一、什么是Webpack

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

二、Webpack安装

安装webpack首先需要安装Node.js, Node.js自带了软件包管理工具npm

配置npm淘宝镜像

npm config set registry https://registry.npm.taobao.org

1. 全局安装webpack

npm install webpack@3.6.0 -g

2. npm init

通过npm init生成, npm包管理的文件

三、Webpack的初使用

目录结构 :

• src : 放置js文件
  • main.js : 入口文件.
• dist : 放置打包后的文件

1. 在项目目录新增webpack.config.js文件

const path = require('path')
module.exports = {
  entry: path.join(__dirname, './src/main.js'),// 入口，表示，要使用 webpack 打包哪个文件
  output: { // 输出文件相关的配置
    path: path.join(__dirname, './dist'), // 指定 打包好的文件，输出到哪个目录中去
    filename: 'bundle.js' // 这是指定 输出的文件的名称
  },
  mode: 'development'
}

2. webpack打包

使用webpack命令 : 使用webpack 把 main.js进行打包, 打包到.\dist\bundle.js文件里.

webpack打包的时候会自动处理文件的依赖

四、loader

loader用来加载css, 图片, 也包括一些高级的将ES6转成ES5代码, 将TypeScript转成ES5代码, 将scss, less转成css, 将.jsx, .vue文件转成js文件等等

1. loader使用过程

步骤一 : 通过npm安装需要使用的loader
步骤二 : 通过webpack.config.js中的modules关键字下进行配置.

2. webpack使用css文件

2.1 安装css-loader和style-loader

npm install --save-dev css-loader@2.0.2
npm install --save-dev style-loader@0.23.1

2.2 配置webpack.config.js

module.exports = {
  module: {
    rules: [
      {
        test: /\.css$/,
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }
}

2. webpack使用处理图片

2.1 安装url-loader

npm install --save-dev url- loader@1.1.2
npm install --save-dev file- loader@3.0.1

2.2 配置

module.exports = {
  module: {
    rules: [
      {
        test: /\.(png|jpg|gif)$/,
        use: [
          {
            loader: 'url-loader',
            options: {
              limit: 8192,
              // 让图片存储到img目录下,并在图片名称后面添加hash值
              name: 'img/[name].[hash:8].[ext]'
            }
          }
        ]
      }
    ]
  }
}

四、Webpack配置Vue

1. 安装

**npm install vue --save **

五、创建Vue时template和el关系

new Vue({
  el: "#app",
  template: `
  <div>
    <h2>{{name}}</h2>
  </div>
  `,
  data: {
    name: "zhangsan"
  }
})

template 里面的代码会把 index.html里面的div替换

1. 把template抽取

import Vue from 'vue'

// 子组件
const App = {
  template: `
  <div>
    <h2>{{name}}</h2>
  </div>
  `,
  data() {
    return {
      name: 'zhangsan'
    }
  },
}

// 父组件
const app = new Vue({
  el: '#app',
  template: '<App />',
  // 注册子组件
  components: {
    App
  }
})

2. 再抽取

在src里面创建一个vue文件夹用来存放vue相关的代码
在vue文件夹里面创建一个app.js文件. 把子组件的代码抽取出来放到app.js文件里面, 并导出

app.js

export default {
  template: `
  <div>
    <h2>{{name}}</h2>
  </div>
  `,
  data() {
    return {
      name: 'zhangsan'
    }
  },
}

在main.js里面导入该模块

import App from './vue/app'

// 父组件
const app = new Vue({
  el: '#app',
  template: '<App />',
  // 注册子组件
  components: {
    App
  }
})

3. 再抽取为一个vue文件

// 模板
<template>
  <div class="box">
    <h2>{{name}}</h2>
  </div>
</template>

// 变量和方法等待
<script>
  export default {
    name: "App",
    data() {
      return {
        name: 'zhangsan'
      }
    },
  }
</script>

// 样式
<style scoped>
  .box {
    color: pink;
  }
</style>

3.1 导入

import App from './vue/App.vue'

但是这时webpack并不识别vue文件

3.2 配置对应的loader

npm install vue-loader@15.4.2 vue-template-compiler@2.5.21 --save-dev