webpack从0配置和使用

webpack

1. webpack 概念:

支持模块化 和 打包 核心功能

• 实现前端模块化开发，支持 CommonJS、AMD、CMD，ES6 方案
• 支持模块化开发，并且帮我们建立，模块之间的依赖关系
• 不仅仅JavaScript是模块化，图片、css、JSON 都可以成为模块化

2. webpack 依赖

• node 环境是执行环境
• npm 是安装node 自动安装，为了 操作 node 的各种操作指令工具

3. webpack 安装

步骤：
一、 查看node 版本：

• node -v

二、 全局安装 webpack (如果使用 vue-cli2 ，最好使用指定版本 3.6.0 )

• npm install webpack@3.6.0 -g

三、局部安装：如果需要使用局部安装

• 使用 npm install webpack@3.6.0 --sabe-dev

为什么全局安装之后，还需要局部安装呢？

• 在终端直接执行 webpack 命令，使用全局安装的 webpack
• 当在 package.json 中定义了 scripts 时，使用中包含了 webpack 命令，那就使用的是 局部安装的 webpack

4. webpack 基本使用

（1） 手动指令打包：

指令构成： webpack 目标文件夹 输出文件夹
指令： webpack src/main.js dist/bundle.js

（2） 配置打包(推荐)

1. 执行 npm init 初始化配置 package.json, 按照流程设置自定义配置，生成webpack配置单
2. 如果配置单内的配置本地不存在，执行 npm install ，webpack 会按照配置单补齐缺失文件
3. 我们后续可以在 " scripts " 内配置执行指令
   

（3） webpack.config.js 配置

1. const path = require("path"); :path 是nodeJS 内置的路径依赖，用于拼接当前文件绝对路径
2. path: path.resolve(__dirname,dist) : reslove 为了拼接当前绝对路径，__dirname 是当前文件绝对路径

/* 引入 路径依赖 : path 属于 node 自带依赖，引入看使用 commonJS 引入 */
const path = require("path");

/* 导出配置 */
module.exports = {
  // 入口文件
  entry: "./src/main.js",
  // 输出文件：注意使用path绝对路径
  output: {
    path: path.resolve(__dirname,dist), //动态获取绝对路径
    filename: "bundle.js",
  },
};

当配置完 webpack.config.js 后就可以直接使用 webpack 打包了，不需要再指定 输入输出路径了

（3）package.json 配置

当我们下载其他人的项目时候，我们需要使用项目需要的 webpack 和 配置版本，防止报错
这时我们就需要使用看到  【局部webpack】配置，只要我们在终端直接起的服务，都是使用的 全局 webpack 
为了使用局部 webpack 我们需要再 package.json 内配置启动指令， 这时的指令默认优先使用 局部  配置

“scripts”： 内部可以自定义，webpack 指令，优先使用本地 webpack 减少 执行代码的冗余

{
  "name": "zhangjian",
  "version": "1.0.0",
  "description": "no",
  "main": "index.js",
  "dependencies": {},
  "devDependencies": {
    "webpack": "^3.6.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack"
  },
  "author": "zhangjian",
  "license": "ISC"
}

5. loader 扩展

由于webpack 只能完成基本的 打包 和 处理 js 之间得依赖，我们还需要加载 css/ less/ 图片等，也包括将  ES6 转换为 ES5 的功能，
基础的 webpakage 是不满足的， 这时我们需要 使用 loader 去扩展 webpack  的功能树

(1) loader 使用步骤

大部分的 webpack  的 loader 插件，我们可以在 webpack   的官网找到，并且得到配置的方法

• npm 安装包下进行安装 需要的loader 插件
• 并且在 webpack.config.js 中的 module关键字中， 进行 配置

举例： 安装 css 、less支持插件

需要依赖： 注意此处的 style-loader 和 css-loader 兼容

• style-loader: 将 css 添加到 DOM 上 : npm install style-loader --save-dev
• css-loader : css 模块化处理 : npm install --save-dev css-loader
• 插件读取的顺序，是自 右向左边执行

/* 导出配置 */
/* 引入 路径依赖 : path 属于 node 自带依赖，引入看使用 commonJS 引入 */
const path = require("path");

/* 导出配置 */
module.exports = {
  // 入口文件
  entry: "./src/main.js",
  // 输出文件：注意使用path绝对路径
  output: {
    path: path.resolve(__dirname, "dist"), //动态获取绝对路径
    filename: "bundle.js",
  },
  module: {
    rules: [
      {
        test: /\.css$/,
        // 使用多个 loader 从右向左读取
        use: ["style-loader", "css-loader"],
        // style-loader: 将 css 添加到 DOM 上
        //css-loader : css 模块化处理
      },
      {
        test: /\.less$/,
        use: [
          {
            loader: "style-loader", // creates style nodes from JS strings
          },
          {
            loader: "css-loader", // translates CSS into CommonJS
          },
          {
            loader: "less-loader", // compiles Less to CSS
          },
        ],
      },
    ],
  },
};

---

6. 配置-webpack 图片处理

(1) file-loader 和 url-loader

• file-loader : 将文件输出到相应的文件夹，返回 目标的 url （大于 8kb）
• url-loader : 向 file-loader 一样工作，当图片尺寸小于限制值，则返回 url-data (小于8kb)
• html以及css中的图片打包成base64，会减少 hppt 请求次数，比如我们一般会把小于8kb的图片才做base64转换

{
        test: /\.(png|jpg|gif)$/,
        use: [
          options: {
                当图片小于 8kb的时候，会将图片预编译成 base64字符串形式
                当图片大于8kb ，需要使用 file-loaer 进行模块加载
              limit: 192,
              name: "img/[name].[hash:8].[ext]",
            },
          {
            loader: "file-loader",
            options: {},
          },
        ],
      },

注意： 当 html 打包后和图片资源不在同一个文件夹下的使用，需要指定 publicPath :' dist/ ' 的绝对路径

(2) 配置文件输出名称格式

webpack 输出的文件，帮我们生成了很长的 hash 名称，目的防止重复，在真实开发中要求图片名称 具有规则可读，
所有图片放在同一个文件夹下 ，所以我们在 option 中 添加如下的选项

• img : 文件要打包到的文件夹名称
• name : 获取图片原来的名称，放在需要放置的位置
• hash:8 : 为了防止名称重复冲突，我们保留 8位 hash
• ext : 使用图片原来的扩展名称

注意： 但是我们的图片依旧没有显示出来，因为图片使用的路径不正确

• 默认情况下， webpack 会将生的路径 直接返回给使用者
• 但是我们的整个程序是打包在 dist 下的，所以我们需要指定路径前缀。添加 dist

---

7. 配置 babel- ES6 转化

ES6 很多 浏览器不支持，需要使用 babel 进行转化为 ES5

指令：npm i babel-loader@7 babel-core babel-preset-es2015 -S

在webpack.config.js module -> rules 内配置 loader

 {
        //所有 js 文件转化
        test: /\.js$/,
        // 禁止转化 基础依赖
        exclude: /(node_modules|bower_components)/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ["es2015"],
          },
        },
      },

---

8.使用Vue.js 准备

.vue 的环境也是基于 node 环境开发的，使用 npm 进行安装 vue 环境 ， 我们使用 webpack 环境中集成的 Vuejs

（1）引入 Vue.js 准备

npm i vue --save  （-S）  	// 在开发环境下安装 vue 依赖

接下里就可以使用 vue了

注意： vue 不借助脚手架时，有两种运行模式可选

• runtime-only : 不运行任何 带 template 的文件
• runtime-compiler : 附带编译器，可以编译运行带 template 文件

在 webpack.config.js 内指定配置依赖类型vue文件

resolve: {
    /* 配置别名 */
    alias: {
      $vue: "vue/dist/vue.runtime.esm.js",
    },
  },

---

(2) vue 文件封装处理

9. plugin 必备插件使用

(1) plugin 和 loader 区别

• loader : 针对现有的文件进行转化，是一个转换器
• plugin : 针对现有的 webpack 框架进行功能扩展，是功能扩展器

(2) BannerPlugin 使用

第一步： npm 安装 目标 plugins ( 某些 webpack 内置的 plugin 不需要安装)

第二步： 在 webpack.config.js 中的 plugins 中进行配置

const webpack = require("webpack");
plugins: [new webpack.BannerPlugin("版权归 zhangDaDa 所有！盗版必揪")],

由于是webpack 内置的plugin 所以，无需安装直接使用，打包出来的 bundle.js 就有水印了

(2) HtmlWebPackPlugin 插件

为了将每次打包时，未 放入 dist 的 html 文件，放进去，使用此插件完成自动化

功能：

• 自动生成个，index/html 文件( 可以指定模板来生成)
• 自动将打包的 js 文件，使用 script 标签 插入到 body 内

安装 HtmlWebpackPlugin 插件 ：npm i html-webpack-plugin -S

可以通过配置 webpack.config.js 中的 plugin 部分自定义修改

• 这里 template 表示 html 生成的 源文件
• 另外，我们需要删除掉，output 配置的 publicPath 属性，因为文件夹固定到了 dist

const HtmlWebpackPlugin = require("html-webpack-plugin");

 plugins: [
    /* 横幅水印插件 */
    new webpack.BannerPlugin("版权归 zhangDaDa 所有！盗版必揪"),
    /* HTML 打包插件 */
    new HtmlWebpackPlugin({
      template: "index.html",
    }),
  ],

(3) js压缩丑化:

当 webpack Verson > 4.0 在 mode: production 生产 模式下，是默认 丑化 js  的，之前的版本需要手动配置

安装：npm i uglifyjs-webpack-plugin@1.1.1 -S

引入plugins且配置:

const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");
/* JS 代码丑化插件 */
    new UglifyjsWebpackPlugin(),

10. 配置本地服务器

webpack提供了个可选的本地服务器，基于nodeJS ，内部使用  express 框架，实现我们想让浏览器实现自动刷新的效果

(1) 模块安装 :npm i webpack-dev-server@2.9.1 -S

(2) devserver 配置：

在  webpack.config.js 文件配置修改如下

• contentBase : 为哪个文件夹提供本地服务，默认是根文件夹，这里我们需要设置为./dist
• port: 端口号
• inline : 页面实时 刷新
• historyApiFallback : 在 SPA 页面，依赖 HTML5 的history模式

webpackconfig.js
/* 配置本地服务器配置 */
  devServer: {
    contentBase: "./dist", // 服务哪个文件夹
    inline: true, // 是热更新
  },

package.json 配置自定义启动：npm run server

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server":"webpack-dev-server --open"
  },

11. 手动配置单 webpack.config.js

webpack.config.js

/* 引入 路径依赖 : path 属于 node 自带依赖，引入看使用 commonJS 引入 */
const path = require("path");
const webpack = require("webpack");
const HtmlWebpackPlugin = require("html-webpack-plugin");
const UglifyjsWebpackPlugin = require("uglifyjs-webpack-plugin");

/* 导出配置 */
module.exports = {
 // 入口文件
 entry: "./src/main.js",
 // 输出文件：注意使用path绝对路径
 output: {
   path: path.resolve(__dirname, "dist"), //动态获取绝对路径(配置 HtmlWebpackPlugin 后删除)
   filename: "bundle.js",
   /* 自动默认文件路径前缀(配置 HtmlWebpackPlugin 后删除) */
   // publicPath: "./",
 },
 /* 放置 laoder  */
 module: {
   rules: [
     /* css 转换 loader */
     {
       test: /\.css$/,
       // 使用多个 loader 从右向左读取
       use: ["style-loader", "css-loader"],
       // style-loader: 将 css 添加到 DOM 上
       //css-loader : css 模块化处理
     },
     /* less loader */
     {
       test: /\.less$/,
       use: [
         {
           loader: "style-loader", // creates style nodes from JS strings
         },
         {
           loader: "css-loader", // translates CSS into CommonJS
         },
         {
           loader: "less-loader", // compiles Less to CSS
         },
       ],
     },
     /* 图片处理 loader */
     {
       test: /\.(png|jpg|gif)$/,
       use: [
         {
           loader: "url-loader",
           options: {
             //  当图片小于 8kb的时候，会将图片预编译成 base64字符串形式
             //  当图片大于8kb ，需要使用 file-loaer 进行模块加载
             limit: 192,
             name: "img/[name].[hash:8].[ext]",
           },
         },
         // {
         //   loader: "file-loader",
         //   options: {},
         // },
       ],
     },
     //ES6 转 ES5
     {
       test: /\.js$/,
       // 排除转化目标文件夹 node_modules
       exclude: /(node_modules|bower_components)/,
       use: {
         loader: "babel-loader",
         options: {
           presets: ["es2015"],
         },
       },
     },
   ],
 },
 // reslove 一般是解决路径的问题
 resolve: {
   /* 配置别名 */
   extensions: [".js", ".vue", ".json"], // 解决 文件省 扩展名问题
   alias: {
     vue$: "vue/dist/vue.esm.js",
   },
 },
 plugins: [
   /* 横幅水印插件 */
   new webpack.BannerPlugin("版权归 zhangDaDa 所有！盗版必揪"),
   /* HTML 打包插件 */
   new HtmlWebpackPlugin({
     template: "index.html",
   }),
   /* JS 代码丑化插件 */
   // new UglifyjsWebpackPlugin(),
 ],

 /* 配置本地服务器配置(开发阶段需要，后期删除) */
 devServer: {
   contentBase: "./dist", // 服务哪个文件夹
   inline: true, // 是热更新
 },
};

package.json

{
  "name": "zhangjian",
  "version": "1.0.0",
  "description": "no",
  "main": "index.js",
  "dependencies": {
    "babel-core": "^6.26.3",
    "babel-loader": "^7.1.5",
    "babel-preset-env": "^1.7.0",
    "babel-preset-es2015": "^6.24.1",
    "file-loader": "^3.0.1",
    "html-webpack-plugin": "^3.2.0",
    "uglifyjs-webpack-plugin": "^1.1.1",
    "vue": "^2.6.14",
    "webpack-dev-server": "^2.9.1"
  },
  "devDependencies": {
    "css-loader": "^2.0.2",
    "less": "^4.1.1",
    "less-loader": "^4.1.0",
    "style-loader": "^0.23.1",
    "url-loader": "^0.6.2",
    "webpack": "^3.12.0"
  },
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build": "webpack",
    "server":"webpack-dev-server --open"
  },
  "author": "zhangjian",
  "license": "ISC"
}

---

12 vue-cli 使用

(1) 安装

安装：npm i @vue/cli -g

以上装的是 cli3 如果想按照 cli2 方式初始化项目，是不可以的，但是有办法，可以安装一个桥接器，cli 官网有

(2) runtime-only 和 runtime-compiler 区别

两种编译模式的DOM渲染的过程:

runtime-compiler

tempalte解析 -> ast (抽象语法树) -> render() -> v DOM (虚拟DOM) -> 真实DOM ->UI

runtime-only L: 性能更高！ 代码更少

render(组件/createElement) -> V-DOM(虚拟 DOM) ->UI

(3) render() 函数的使用

方式1:

new Vue({
  el: "#app",
  // render: h => h(App)
  render: (createElement) => {
    方式1
    // return createElement("标签", "相关数据对象(可以不传)", ["内容数组"]);
    return createElement("div", { class: "box" }, ["我是内容"]);
  }
});

方式2：创建组件对象，render(组件对象)， 直接渲染

const comp = Vue.component("comp", {
  template: ` <div>我是comp 组件</div> `,
  data() {
    return {
      msg: "comp组件"
    };
  }
});

new Vue({
  el: "#app",
  render: createElement => {
    return createElement(comp); //传入一个组件对象直接生成
  }
});

(4) cli 运行执行过程原理

npm run build 过程

npm run dev过程

(3) 起别名 alias[]

在 cli2 中 修改build / webpack.base.confi.js 文件，cli3 需要手动 vue.config.js

cli2 配置: webpack.base.confi.js

(4) cli2 和 cli3 区别

发布时间: 2018 年 8:11

• vue-cli3 基于 webpack4 打造的，vue-cli2 基于 webpack3 支持
• vue-cli3 设计原则是0配置，移除了 build 和 config
• vue-cli3 提供了 vue-ui 可视化配置，其实不如指令方便
• 移除了 static 文件夹，新增了 public 文件夹， html 文件移到 public 内

(5) 文件夹功能区域