Vue 基础 day05 webpack 3.x

什么是webpack

webpack 是前端的一个项目构建工具, 它是基于 Node.js 开发出来的一个前端工具

借助于webpack这个前端自动化构建工具, 可以完美实现资源的合并、打包、压缩、混淆等诸多功能

webpack安装的两种方式

$ npm install webpack -g 全局安装
$ npm install webpack --save-dev 下载开发版本
$ npm install wabpack@<version>  下载指定版本

使用webpack 打包构建隔行变色案例

1. 运行 npm init 初始化项目, 使用 npm 管理项目中的依赖包;
2. 创建项目基本目录
3. 使用 npm install jquery --save 安装类库
4. 创建main.js 书写隔行变色案例

import $ from 'jquery'
$('#list li:even').css('backgroundColor', 'red');
$('#list li:odd').css('backgroundColor', 'yellow');

1. 直接在 index.html 中引用会报错, 因为浏览器不认识 import 这种高级的js语法, 需要使用webpack进行处理, webpack默认会把这种高级的语法转换为浏览器可以识别的语法;
2. 运行 命令 webpack 入口文件路径 输出文件路径

$ webpack ./src/main.js ./dist/bundle.js

1. 此时引入打包好的文件就可以使用啦

使用 webpack 的配置文件简化打包命令

1. 在项目根目录下创建 webpack.config.js
2. 由于运行 webpack 命令的时候, webpack 需要指定入口文件和输出文件的路径, 所以我们需要在 webpack.config.js 中配置这两个路径;

// 导入路径模块
const path = require('path')
// 导出一个配置对象, 将来webpack在启动的时候, 会默认查找webpack.config.js, 并读取这个文件中的配置对象, 来进行打包处理
module.exports = {
  entry: path.join(__dirname, '/src/main.js'), // 项目入口文件
  output: { // 配置出口选项
    path: path.join(__dirname, '/dist'), // 配置输出路径
    filename: 'bundle.js' // 配置输出文件
  }
}

使用 webpack 打包的两种方式

配置 package.json 文件

1. 安装 webpack-dev-server 工具

$ npm install webpack-dev-server -D

注意: 

1. webpack-dev-server 会在项目的根目录下虚拟一个bundle.js, 注意引用 

2. webpack-dev-server 依赖于 webpack 所以 一定要安装 webpack

1. 在 scripts 键下 在增加一个键

"dev": "webpack-dev-server"
补充: 
    --open            自动打开浏览器
    --port 3000       指定浏览器端口
    --contentBase src 指定打开路径
    --hot             热重载, 热更新
webpack-dev-server --open --port 3000 --contentBase src --hot

1. cmd 下执行

$ npm run dev

配置 webpack.config.js 文件

1. 配置文件下新增 键值对

devServer: {
  open: true,
  port: 3000,
  contentBase: 'src',
  hot: true
}

1. 导入 webpack 包

const webpack = require('webpack')

1. 配置文件下 新增键值对

plugins: [
    new webpack.HotModuleReplacementPlugin()
]

1. package.json 的 scripts 下 新增一个键

"dev": "webpack-dev-server"

使用 html-webpack-plugin 插件 把 html 放到 内存中去

1. 下载 html-webpack-plugin 插件

$ npm install html-webpack-plugin -D

1. 在 config.webpack.js 中增加配置项

注意: 只要是插件 就放到 plugins 组件中

// 1. 在内存中创建模板
// 2. 不需要引用 bundle.js 文件
// 3. 把打包好的 bundle.js 文件 自动追加到 html 页面中去
const htmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  plugins: [
    new htmlWebpackPlugin({ // 创建 插件
      template: path.join(__dirname, '/src/index.html'), // 指定模板页面, 会根据路径生成到内存中去
      filename: 'index.html' // 模板文件
    })
  ]
}

使用 第三方插件打包 JS 以外的资源文件

webpack 默认之鞥呢处理打包 js 文件 如果需要处理其他文件, 需要手动安装一些 loader 加载器

处理 打包 css 文件

$ npm inatll style-loader css-loder -D

处理 打包 less 文件

$ npm install less-loader less -D

处理 打包 scss 文件

$ npm install sass-loader node-sass -D

配置文件中 配置这些 资源

module.exports = {
  module: { // 这个节点 用于配置 所有第三方模块加载器
    rules: [ // 所有的第三方模块匹配规则
      // 配置处理 css 匹配规则
      {test: '/\.css$/', use: ['style-loader', 'css-loader']},
      // 配置处理 less 匹配规则
      {test: '/\.less$/', use: ['style-loader', 'css-loader', 'less-loader']},
      // 配置出路 scss 匹配规则
      {test: '/\.scss$/', use: ['style-loader', 'css-loader', 'sass-loader']}
    ]
  }
};
处理过程: 
    1. 发现要处理的文件不是 js 文件, 然后去配置文件中查找, 有没有对应的第三方 loader 规则
    2. 如果有, 就会调用对应的 loader 处理这种文件类型
    3. 在调用 loader 的时候, 从右往左调用
    4. 最后的 loader 调用完毕, 会把最后的结果交给 webpack 打包合并, 最终输出到 bundle.js 中