【学习笔记】webpack + Vue 组件化开发

安装

1. 安装webpack前要先安装Node.js
2. 全局安装webpack：npm install [email protected] -g（这里先指定3.6.0版本，因为vue cli2依赖该版本，可以进行手动配置，便于学习）
3. 局部安装webpack：进入到项目根目录，输入npm install [email protected] --save-dev

为什么需要安装局部webpack

因为一个项目往往依赖特定的webpack版本，全局的版本可能很这个项目的webpack版本不一致，导出打包出现问题
所以通常一个项目，都有自己局部的webpack

执行局部webpack打包：node_modules/.bin/webpack

使用

准备工作

1. 新建src文件，创建两个互相依赖的js文件
2. 新建dist文件，保存打包后的文件
3. 新建index.html文件（根目录下）

基本使用

在终端进入到项目根目录，输入命令：webpack ./src/main.js ./dist/bundle.js
该命令的意思是将main.js在该项目内所依赖的所有js文件打包到dist目录下的bundle文件

如果报错禁止运行脚本，则需要配置powershell

配置

入口和出口

我们每次使用webpack的命令都需要写上入口和出口作为参数，非常麻烦，所以我们要创建一个webpack配置文件：webpack.config.js，在该文件配制好入口和出口后，下一次只需输入webpack即可打包

绝对路径需要依赖node的path包，一般只要依赖于node环境的项目，都需要创建package.json文件，该文件是告诉关于项目一些信息以及管理node包，使用npm init命令创建

如果项目有依赖一些node的包，使用npm install会根据package.json自动安装所需要的包

// 用于获取绝对路径，需要依赖node的path包，node全局中是包含该包的，所以不需单独建包
const path = require('path')
module.exports = {
     
  // 入口：可以是字符串/数组/对象，这里我们入口只有一个，所以写一个字符串即可
  entry: './src/main.js',
  // 出口：通常是一个对象，里面至少包含两个重要属性：path和filename
  output: {
     
    //__dirname：获取当前文件所在绝对路径
    path: path.resolve(__dirname, 'dist'),
    filename: 'bundle.js'
  }
}

webpack映射

我们在真正的开发中一般使用npm run build来构建我们的项目，因为使用webpack命令时后面可能会跟很长的内容，我们想让这个长命令可以由其他命令代替

webpack映射还有一个好处，我们在任何终端执行webpack的时候都会执行全局webpack，但是我们使用映射的命令会优先执行局部webpack（本地），因为package.json中的scripts的脚本在执行时，会先寻找本地的node_modules/.bin路径中对应的命令，如果没找到，再去全局中寻找

打开package.json文件，在scripts对象内添加"build"属性

"scripts": {
     
  // 此时执行npm run build命令将转换为webpack命令
    "build": "webpack"
  },

loader

前面演示了如何打包js文件，但是如果我们想要打包css、vue、ts等文件时，需要先给webpack扩展对应的loader，这里以css为例演示

进入https://www.webpackjs.com/loaders/，找到对应的css的loader，按照文档操作

1. 安装

• css-loader：npm install --save-dev css-loader
• style-loader：npm install style-loader --save-dev

2. 进入webpack.config.js配置文件，在module.exports对象中添加module对象

  module: {
     
    rules: [
      {
     
        test: /\.css$/,
        // css-loader：只负责加载，但不负责解析，也不负责与html文件连接
        // style-loader：将模块的导出作为样式添加到 DOM 中
        // webpack在使用多个loader时，是从右向左读取，我们要先加载css，在添加样式，所以要将css-loader放到右边
        use: [ 'style-loader', 'css-loader' ]
      }
    ]
  }

打包css文件

安装并配置完css的loader，我们就可以开始打包了

我们使用webpack打包文件时，只会打包入口js文件所依赖的文件，不被它依赖的文件不会被打包；所以我们将css等文件添加为入口js的依赖就能带着css文件一起打包了

// 依赖css文件
require('./css/normal.css')

打包scss文件

如果我们希望在项目中使用scss、less、stylu来写样式，webpack是否可以帮助我们处理呢？我们这里以scss为例，其他也是一样的

注意：我们使用Live Sass Compiler插件会实时将scss文件转换为css文件，这些css文件可以作为我们开发时调整样式使用，在webpack打包时只打包scss文件即可

步骤：

1. 创建一个scss文件，然后放在css文件夹中
2. 在入口js文件依赖该scss文件：require('./css/special.scss')
3. 执行命令：npm install sass-loader node-sass webpack --save-dev
4. 进入webpack.config.js文件，我们在配置css的loader的时候已经添加了module对象，因此直接在module对象的rules数组里添加一个新的对象元素
5. 执行npm run build，如果报错getResolve is not a function，则是因为scss安装的版本过高，需卸载重装其他版本

// 在webpack.config.js中配置loader
{
     
   test: /\.scss$/,
   use: [{
     
       loader: "style-loader" // 将 JS 字符串生成为 style 节点
   }, {
     
       loader: "css-loader" // 将 CSS 转化成 CommonJS 模块
   }, {
     
       loader: "sass-loader" // 将 Sass 编译成 CSS
   }]
   }

打包图片资源

我们在images文件夹加入两张图片：一张小于8kb的图片和一张大于8kb的图片，待会儿我们会针对这两张不同大小的图片进行不同的处理

我们已经将normal.css文件作为main.js的依赖了，所以我们在该css文件中设置背景图片也会作为main.js的依赖；但我们需要为图片单独添加loader

步骤：

1. 在项目根目录执行命令：npm install --save-dev url-loader
2. 进入webpack.config.js文件，在已经创建好的module对象里的rules数组添加一个新的对象元素

{
     
  // 设置匹配的图片格式
  test: /\.(png|jpg|gif)$/,
  use: [
    {
     
      loader: 'url-loader',
      options: {
     
        // 限制图片大小，图片超出limit会用file-loader来打包，需安装file-loader
        // 图片小于limit时，会将图片url地址编译成base64格式字符串
        limit: 8192
      }
    }
  ]
}

file-loader

当我们使用的图片超出了url-loader配置的大小范围，则不会再以url-loader来进行加载，而是以file-loader来加载
如果没有安装file-loader则会报错

1. 安装file-loader：npm install --save-dev file-loader，无需对file-loader专门进行配置

当我们使用file-loader加载图片后，发现在dist文件夹下生成了一个以hash值命名的图片，也就是我们的源图片；但在网页中该图片并没有显示，因为webpack打包后的文件url路径默认是根目录，而不是dist目录，因此需要修改默认url路径

2. 进入webpack.config.js文件，在output对象中添加publicPath属性，以后任何涉及到url的路径，都会在前面拼接一个dist/

  output: {
     
    publicPath: 'dist/'
  },

注意：此时我们的index.html在项目根目录，所以访问资源的时候需要添加dist/路径；到后期我们也会将index.html打包到dist目录下，到时候需要将publicPath属性删掉

修改文件名称

使用file-loader打包文件时会在dist文件夹生成一个32位hash值命名的文件，目的是防止文件名重复

但是在真实开发中我们希望将所有的图片放在dist下的images文件夹下，附带图片原来的名称，同时也要防止重复
因此我们需要在webpack.config.js文件中进行配置：

{
     
   // 1. 找到url-loader的配置项
   test: /\.(png|jpg|gif)$/,
   use: [{
     
     loader: 'url-loader',
     options: {
     
       limit: 10000,
       // 2. 在options中添加name属性
       name: 'images/[name].[hash:8].[ext]'
     }
   }]
}

images/[name].[hash:8].[ext]：表示生成的文件会在dist的images文件夹下并以原来的名字+8位哈希值+原后缀命名，如：欧阳娜娜.d96873f5.jpg

ES6 转 ES5

webpack在打包我们的js文件的时候并没有完全的将ES6语法转换为ES5，因此我们需要借助babel来帮我们转换

步骤：

1. 安装babel：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
2. 进入webpack.config.js文件，在已经创建好的module对象里的rules数组添加一个新的对象元素来配置babel-loader

{
     
   test: /\.js$/,
   // 排除掉node_modules文件夹
   exclude: /(node_modules|bower_components)/,
   use: {
     
     loader: 'babel-loader',
     options: {
     
       presets: ['es2015']
     }
   }
}

webpack 中的 Vue 使用

1. 安装Vue：npm install vue --save
2. 在main.js文件中导入Vue：import Vue form 'vue'

• 这里直接写from vue即可，如果不加相对路径，会默认去node_modules文件夹中导入，而我们的Vue就安装在此文件夹
• 并且node_modules会执行export default Vue，所以我们直接import Vue即可

3. 此时我们编写一段Vue代码，打包并运行，发现报错using the runtime-only，我们Vue在构件时默认构建runtime-only版本，该版本不允许出现