乐趣区

关于javascript:webpack快速入门

jiezi

webpack 是一个动态模块打包工具，基于 node.js 开发。在开启 webpack coding 之前，咱们先理解一些外围概念。

一. 外围概念

1.Entry
主入口，用来通知 webpack 从哪个模块开始，它会找出哪些模块或库是入口模块（间接或间接）的依赖

2.Output
通知 webpack 在哪里输入它所创立的 bundle，以及如何命名这些文件

3.Loader
在 webpack 中，万物皆模块。它自身只能了解 json 和 js 文件。loader 让 webpack 可能去解决其余类型的文件，并将它们转换为无效模块，以供应用程序应用，以及被增加到依赖图中。
比方：xx.vue, xx.ts, xx.scss 模块，须要应用对应的 loader，转化为 webpack 意识的格局。
loader 具备以下个性：

  • loader 能够是同步的，也能够是异步的。
  • loader 能够在 nodejs 中执行
  • loader 反对链式调用，一组链式 loader 将依照相同程序执行。链中的第一个 loader 将其后果（也就是利用过转换后的资源）传递给下一个 loader，依此类推。最初，链中的最初一个 loader，返回 webpack 所冀望的 JavaScript。

4.Plugin
loader 用于转换某些类型的模块，而插件则能够用于执行范畴更广的工作。包含：打包优化，资源管理，注入环境变量等。

5.Mode
构建模式，通知 webpack 是开发环境还是生产环境。通过抉择 development, production 或 none 之中的一个，来设置 mode 参数。

6. 浏览器兼容
webpack 反对所有合乎 ES5 规范 的浏览器（不反对 IE8 及以下版本）

7. 运行环境
运行环境是 node.js。有许多刚入门的小伙伴，误认为是浏览器，在此揭示下~

筹备工作 ok，上面咱们进入微妙的 webpack 之旅吧~

二. hello world

上面，咱们先初始化一个我的项目，执行：

npm init test
touch webpack.config.js index.html index.js index.css
yarn add -D webpack@4.43.0 webpack-cli@3.3.11 html-webpack-plugin@4.3.0

编辑 index.html

<html>
    <head>
        <meta charset="utf-8"/>
    </head>

    <body>
        <div id='root' class="root"></div>
    </body>
</html>

编辑 index.js

console.log("hello world")

编辑 webpack.config.js

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

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 输入文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 开发模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({template: "index.html"})
  ],
}

编辑 package.json

"scripts": {"dev": "webpack --progress"},

执行 npm run dev，关上浏览器 http://localhost:8080，
咱们的第一个程序，hello world 胜利啦~

三. Loader

webpack 所有皆模块，但它只能解决 js 和 json 文件。

1. 如果咱们须要在 js 文件中应用 es6 语法，该如何操作呢？

这个时候，咱们须要 babel

装置
yarn add -D @babel/core@7.9.6 babel-loader@8.1.0
在 webpack 中增加 loader 配置
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 输入文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 开发模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({template: "index.html"})
  ],
  // 增加 loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {loader: "babel-loader"},
        exclude: /node_modules/
      }
    ]
  }
}
测试
touch test.js

在 test.js 文件中，增加如下代码：

export function Hi() {return "hi es6";}

在 index.js 中援用

import {Hi} from "./test";

let res = Hi();

console.log(res); // hi es6

到这里，咱们能够欢快的应用 es6 coding 啦~

2. 如果咱们须要增加 css 文件，该如何操作呢？

这个时候，咱们须要 css-loader, style-loader

装置
yarn add -D css-loader style-loader
批改 webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 输入文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 开发模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({template: "index.html"})
  ],
  // 增加 loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {loader: "babel-loader"},
        exclude: /node_modules/
      },
      // 增加 css-loader, style-loader
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
    ]
  }
}

留神：webpack 执行 style-loader, css-loader 时，从右往左执行，程序不可颠倒

测试

批改 index.js

import {Hi} from "./test";
// 引入 css 文件
import "./index.css";

let res = Hi();

console.log(res);

index.css

.root {
  width: 100%;
  height: 100%;
  background: blue;
}

这个时候，咱们会看到页面变成了蓝色，款式问题搞定，能够欢快的编写 css 啦~

3. 如果咱们须要增加.vue 文件，该如何操作呢？

这个时候，咱们须要尤大的 vue-loader

装置
yarn add -D vue-loader@15.9.5 vue-template-compiler@2.6.12
yarn add vue@2.6.12
批改 webpack.config.js
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 输入文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 开发模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({template: "index.html"}),
    // 增加 vue loader 插件
    new VueLoaderPlugin(),],
  // 增加 loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {loader: "babel-loader"},
        exclude: /node_modules/
      },
      // 增加 css-loader, style-loader
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      // 增加.vue loader
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
    ]
  }
}
测试

批改 index.js

// 引入 css 文件
import "./index.css";
import Vue from "vue";
// 引入 vue 文件
import HelloVue from "./hello.vue";

new Vue({render: h => h(HelloVue)
}).$mount('#root');

当前目录下：增加 hello.vue 文件


<template>
  <div> 你好 vue</div>
</template>

<script>
export default {data() {return {}
  }  
}
</script>

<style scoped>

</style>

vue-loader 配置胜利，咱们能够欢快的编写 vue 啦~

其实其余文件也相似，咱们只须要应用对应的 loader 去解析对应的文件，就能够了。
loader 的实质，将 webpack 不意识的文件，转化为 webpack 可辨认的格局

四. Plugin

plugin 用于扩大 Webpack 性能，各种各样的 Plugin 简直让 Webpack 能够做任何构建相干的事件。
plugin 的配置很简略，plugins 配置项承受一个数组，数组里每一项都是一个要应用的 plugin 的实例。

举个????：
咱们在构建时，须要理解构建的进度，那么咱们这个时候须要插件来解决。

装置
yarn add -D progress-bar-webpack-plugin@1.11.0
批改 webpack.config.js 配置
const HtmlWebpackPlugin = require("html-webpack-plugin");
const {VueLoaderPlugin} = require("vue-loader");
// 增加进度条插件
const ProgressBarPlugin = require("progress-bar-webpack-plugin");

module.exports = {
  // 主入口文件
  entry: __dirname + "/index.js",
  // 输入文件
  output: {
    filename: 'bundle.js',
    path: __dirname + "/dist"
  },
  // 开发模式
  mode: "development",
  // 插件
  plugins: [
    new HtmlWebpackPlugin({template: "index.html"}),
    // 增加 vue loader 插件
    new VueLoaderPlugin(),

    // 应用进度条插件
    new ProgressBarPlugin()],
  // 增加 loader
  module: {
    rules: [
      {
        test: /\.js$/,
        use: {loader: "babel-loader"},
        exclude: /node_modules/
      },
      // 增加 css-loader, style-loader
      {
        test: /\.css$/,
        use: ["style-loader", "css-loader"]
      },
      // 增加.vue loader
      {
        test: /\.vue$/,
        loader: "vue-loader"
      },
    ]
  }
}
测试

构建进度条插件增加胜利~

应用 Plugin 的难点在于把握 Plugin 自身提供的配置项，而不是如何在 Webpack 中接入 Plugin。

简直所有 Webpack 无奈间接实现的性能都能在社区找到开源的 Plugin 去解决。

到这里，咱们曾经入门了 webpack 的基本操作。码字不易，还请多多关注~????

退出移动版