html里直接引用es6的js模块（不通过webpack等打包工具）（html 引用js）

25-02-10 15

想了解html里直接引用es6的js模块的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于不通过webpack等打包工具的相关问题，此外，我们还将为您介绍关于vue.js2.0实战(7):We

想了解html里直接引用es6的js模块的新动态吗？本文将为您提供详细的信息，我们还将为您解答关于不通过webpack等打包工具的相关问题，此外，我们还将为您介绍关于vue.js2.0实战(7):Webpack打包工具使用、vue.js不通过webpack/npm/yarn，直接加载单文件组建(.vue)、webpack (静态模块打包工具) 手记、Webpack 2.2.0 rc3 发布，模块加载打包工具的新知识。

本文目录一览：

html里直接引用es6的js模块（不通过webpack等打包工具）（html 引用js）
vue.js2.0实战(7):Webpack打包工具使用
vue.js不通过webpack/npm/yarn，直接加载单文件组建(.vue)
webpack (静态模块打包工具) 手记
Webpack 2.2.0 rc3 发布，模块加载打包工具

html里直接引用es6的js模块（不通过webpack等打包工具）（html 引用js）

1. 在html里引入包

<script src="https://cdn.jsdelivr.net/npm/es6-module-loader@0.17.11/dist/es6-module-loader.js"></script>

2. 编写es6文件

// mymodule.js:

export class q {
    constructor() {
         console.log(''this is an es6 class!'');
    }
}

3. 引用es6文件并使用

<script type="module">

    import { q } from ''mymodule'';

    new q(); // -> ''this is an es6 class!''

</script>

参考链接：https://github.com/lukehoban/es6-module-loader

vue.js2.0实战(7):Webpack打包工具使用

一、什么是webpack

1. webpack是什么？

webpack是一个模块打包工具。
用vue项目来举例：浏览器它是只认识js，不认识vue的。而我们写的代码后缀大多是.vue的，在每个.vue文件中都可能html、js、css甚至是图片资源；并且由于组件化，这些.vue文件之间还有错综复杂的关系。所以项目要被浏览器识别，我们就要使用webpack将它们打包成js文件以及相应的资源文件。
或者这么理解，我们以vue项目的形式编写项目逻辑，浏览器以他理解的方式来运行项目。webpack把我们的vue项目想表达的所有意图传递给浏览器让浏览器去运行。
PS：webpack功能不止于此，但这个功能是让我们项目能跑起来的必要条件！（个人理解，如有错误，还请批评指正）

2. 来个demo理解下

这里我们来理解下webpack是如何打包的~（转译会在loaders中提到）。首先我们写两个最简单的js
hello.js

console.log("hello~~")

app.js

console.log("hello app");
require("./hello.js")

app.js中导入了hello.js，它们之间有导入关系。我们假如直接将app.js放到html中是会报错的。

hello app
Uncaught ReferenceError: require is not defined at app.js:2

如果我们要维持这种关系我们就必须使用打包工具进行打包。在命令行中输入：

// 安装webpack
$ npm install webpack -g
// 打包app.js
$ webpack app.js bundle.js

然后我们会发现项目中多了一个bundle.js文件，我们在html中导入这个js文件。
index.html

<!DOCTYPE html>
<html>
  <head>
    <title>demo01</title>
  </head>
  <body>
    <h1>demo01</h1>
    <script src="bundle.js"></script>
  </body>
</html>

最后输出正确结果

hello app
hello~~

二、webpack.config.js

1. 定义

webpack.config.js文件是webpack的默认配置文件。之前我们使用命令行$ webpack entry.js output.js来实现打包，其实webpack可以有更多的打包配置，这些配置都是在webpack.config.js中完成的。下面是一个简单的webpack.config.js。

const webpack = require("webpack")

module.exports = {
  entry: {
    entry: "./app/entry.js",
  },
  output:
  {
    path: __dirname + "/dist",
    filename: ''bundle.js'',
  },
  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: ''babel'',
        exclude: /node_modules/
      },
    ]
  }
}

个人觉得这三个东西是最最重要的了，所以必须单独说说这三个配置。其他配置都可以去查阅资料慢慢来。

2. entry&output

entry是配置webpack的入口文件，上面的代码中我们将app目录下的entry.js作为入口文件。webpack会将与entry.js有关的资源都进行打包。
output是出口文件，即打包好的文件的存放地址和文件名。

这里有几种文件的输入输出情况。引用自Webpack 2 入门教程。

2.1 单文件，单输出

const webpack = require("webpack");
module.exports = {
  context: __dirname + "/src",
  entry: {
    app: "./app.js",
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].bundle.js",
  },
};

2.2 多文件，单输出

const webpack = require("webpack");
module.exports = {
  context: __dirname + "/src",
  entry: {
    app: ["./home.js", "./events.js", "./vendor.js"],
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].bundle.js",
  },
};

2.3 多文件，多输出

const webpack = require("webpack");
module.exports = {
  context: __dirname + "/src",
  entry: {
    home: "./home.js",
    events: "./events.js",
    contact: "./contact.js",
  },
  output: {
    path: __dirname + "/dist",
    filename: "[name].bundle.js",
  },
};

大家可以动手实践一下，很好理解。打包出来的单个或者多个文件直接可以在html中使用。

<script src="./dist/entry.js"></script>

3. loaders

loader是webpack的加载器，可以帮我们处理各种非js文件。如css样式，vue、jsx、weex等后缀的代码，JPG、PNG图片等。所以我们一般会在package.json中看到各种*-loader。这些就是各类资源的loader加载器。
在module的loaders数组中可以有多个对象，每个对象就是一个加载器。下面是babel-loader的最简单配置方式

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: ''babel'',
      },
    ]
  }

对象中的test是正则表达式，用于搜索后缀为.js的文件。loader是所用加载器名称。

4. 使用babel来转译ES6代码

下面我们来一步步使用babel-loader将ES6语法用于项目中。
webpack打包的文件默认是不支持ES6的，我们需要用babel转译。

4.1 安装babel

这个配置其实我是抄的vue-cli，个人对babel用法还不是很熟。
在package.json中添加依赖。

  "devDependencies": {
    ...
    "babel-core": "^6.22.1",
    "babel-loader": "^6.2.10",
    "babel-plugin-transform-runtime": "^6.22.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "webpack": "^1.14.0"
    ...
  }

npm安装

$ npm install

4.2 在webpack.config.js中添加babel-loader的配置

  module: {
    loaders: [
      {
        test: /\.js$/,
        loader: ''babel'',
      },
    ]
  }

4.3 添加.babelrc

在项目根目录下添加.babelrc文件，文件内容为

{
  "presets": ["es2015", "stage-2"],
  "plugins": ["transform-runtime"],
  "comments": false
}

4.4 使用ES6

import good from ''./good.js''

三、分析vue-cli

说了这么多，我的最终目的还是为了学习Vue.js。所以在对webpack有了一定的理解之后，就发现其实vue-cli并不是那么深不可测。

1. 结构分析

build —— 项目构建文件夹
- build.js —— 打包构建脚本（npm run build）
- check-versions.js —— npm和node版本的查询
- dev-client.js ——
- dev-server.js —— 开发调试脚本（npm run dev）
- utils.js —— 工具类
- webpack.base.config.js —— Webpack配置文件
- webpack.dev.config.js —— 开发版本Webpack配置文件，与webpack.base.config.js合并成完整的配置文件。
- webpack.prod.config.js —— 生产版本Webpack配置文件，与webpack.base.config.js合并成完整的配置文件。
config —— 配置文件夹，保存有各种配置参数（文件路径、服务器端口、功能开关）
src —— 代码文件夹
static
- .gitkeep —— 作用是将文件所在文件夹保留在git版本控制中。文件类型和.gitignore差不多。
.babelrc —— babel配置文件
.editorconfig —— 编辑配置，确保使用各种编辑器时能有相同的编辑格式。
.gitignore —— git忽略文件
index.html —— 页面，最终显示在这个html中
package.json —— npm配置文件，包含了项目的信息、脚本、依赖库等重要信息。

2. 创建简易cli

理解完vue-cli的某些功能后，不难发现我们自己也可以搭建简易的vue-cli了。
官方的脚手架中除了有webpack打包，还包含了node脚本、开发和生产模式的切换、ESLint配置等功能。我们暂时不需要，将项目简化来更好的理解webpack。

2.1 package.json

让我们来自己建立一个cli，首先创建一个空文件夹。

$ mkdir demo05
$ cd demo05

初始化npm

$ npm init

然后复制vue-cli中的依赖库到package.json中（直接复制啦，具体依赖库的作用就不提啦~之后会写博客补上的）。

  "dependencies": {
    "vue": "^2.1.0"
  },
  "devDependencies": {
    "autoprefixer": "^6.4.0",
    "babel-core": "^6.0.0",
    "babel-loader": "^6.0.0",
    "babel-plugin-transform-runtime": "^6.0.0",
    "babel-preset-es2015": "^6.0.0",
    "babel-preset-stage-2": "^6.0.0",
    "babel-register": "^6.0.0",
    "chalk": "^1.1.3",
    "connect-history-api-fallback": "^1.1.0",
    "css-loader": "^0.25.0",
    "eventsource-polyfill": "^0.9.6",
    "express": "^4.13.3",
    "extract-text-webpack-plugin": "^1.0.1",
    "file-loader": "^0.9.0",
    "friendly-errors-webpack-plugin": "^1.1.2",
    "function-bind": "^1.0.2",
    "html-webpack-plugin": "^2.8.1",
    "http-proxy-middleware": "^0.17.2",
    "json-loader": "^0.5.4",
    "semver": "^5.3.0",
    "opn": "^4.0.2",
    "ora": "^0.3.0",
    "shelljs": "^0.7.4",
    "url-loader": "^0.5.7",
    "vue-loader": "^10.0.0",
    "vue-style-loader": "^1.0.0",
    "vue-template-compiler": "^2.1.0",
    "webpack": "^1.13.2",
    "webpack-dev-middleware": "^1.8.3",
    "webpack-hot-middleware": "^2.12.2",
    "webpack-merge": "^0.14.1"
  },

2.2 webpack.config.js

这里的webpack配置文件中的部分内容是从官方的 webpack.base.config.js 中复制出来的。正如我项目结构中所说的，vue-cli中的 webpack.base.config.js 是基础的配置文件。vue-cli中的 webpack.dev.config.js 和 webpack.prod.config.js 分别代表了开发和生产版本的webpack配置文件，他们与 webpack.base.config.js 合并成最后的webpack配置文件。这里我们只要找到 webpack.base.config.js 即可。
下面是完整配置代码。

var path = require("path")
var projectRoot = path.resolve(__dirname, ''../'')

module.exports = {
  // 入口文件
  entry: "./src/main.js",
  // 输出文件
  output: {
    filename: "./dist/bundle.js"
  },
  // 别名
  resolve: {
    extensions: ['''', ''.js'', ''.vue'', ''.json''],
    fallback: [path.join(__dirname, ''../node_modules'')],
    alias: {
      ''vue$'': ''vue/dist/vue.common.js'',
      ''src'': path.resolve(__dirname, ''../src''),
      ''assets'': path.resolve(__dirname, ''../src/assets''),
      ''components'': path.resolve(__dirname, ''../src/components'')
    }
  },
  module: {
    // 加载器
    loaders: [
      {
        test: /\.vue$/,
        loader: ''vue''
      },
      {
        test: /\.js$/,
        loader: ''babel'',
        exclude: /node_modules/
      },
      {
        test: /\.json$/,
        loader: ''json''
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: ''url'',
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: ''url'',
      }
    ]
  },
}

2.3 添加必要文件

由于使用git、babel，所以我将vue-cli中的 .gitignore 和 .babelrc 直接复制过来。
还有，由于懒得写逻辑代码，这里我将 src 文件夹中所有内容也直接复制过来。
复制按成后进行webpack打包。

$ webpack

打包完成就会出现一个在 dist 目录下有一个 bundle.js 文件。有了打包文件，我们还需要创建一个 index.html 来显示效果，这个之后再说。
所以，最后的项目结构如下图

2.4 index.html

现在，到了呈现效果的时候了。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Demo3</title>
  </head>
  <body>
    <div id="app">
    </div>
    <script src="./dist/bundle.js"></script>
  </body>
</html>

很简单，创建一个id为app的div元素用于显示Vue组件内容，然后将打包好的bundle.js引用进去。
现在，到项目目录中找到 index.html 页面，浏览器打开就可以看到效果啦~

四、相关资料推荐

这里推荐一下我学习webpack中发现的一些好的网站，分享一下。
https://github.com/webpack-china/awesome-webpack-cn
http://blog.guowenfh.com/2016/03/24/vue-webpack-01-base/

Vue.js学习系列：

vue.js2.0实战(1):搭建开发环境及构建项目

vue.js2.0实战(2):IDE配置及使用

vue.js2.0实战(3):基础示例

vue.js2.0实战(4):vue-router2学习实践

vue.js2.0实战(5):vuex学习实践

vue.js2.0实战(6):axios和网络传输相关知识的学习实践

vue.js2.0实战(7):Webpack打包工具使用

vue.js2.0实战(8):从VUE-CLI来聊聊ESLint

vue.js2.0实战(9):Vue单元测试Karma+Mocha学习

vue.js2.0实战(10):引入新的工程遇到的问题及解决办法

本学习笔记参考了很多大神的文章，然后融合进了自己学习过程中遇到的问题和难点，做了一些说明，确实是站在了巨人的肩膀上，另外，本学习笔记的源码已经上传到了github上面，感兴趣的同学可以自行下载：https://github.com/BrillantZhao/VueTes

vue.js不通过webpack/npm/yarn，直接加载单文件组建(.vue)

1. 在html页面上引入此插件：https://github.com/FranckFreiburger/http-vue-loader

<script src="https://cdn.jsdelivr.net/npm/http-vue-loader@1.4.2/src/httpVueLoader.min.js"></script>

2. 然后就能在vue里调用.vue文件的组件了

Vue.component(''block-header'', httpVueLoader(''/block-header.vue''))

3. 如果只是加载html模板的话可以这样（不能包含<style>和<script>）

Vue.component(''block-menu'', function (resolve, reject) {
    axios.get(`/block-menu.html`).then(resp => resolve({template: resp.data}))
})

参考链接： https://stackoverflow.com/questions/51791597/vue-components-without-webpack-npm-yarn

webpack (静态模块打包工具) 手记

新建src 在下面创建 index.js (入口文件) 和 add.js
下载安装webpack (npm run build 或 yarn build), 配置打包命令 build : webpack
默认入口src/index.js-要被打包的文件, 要引入到这里使用
输入yarn build打包命令(实际是项目环境webpack命令)
输出代码到add/add.js中

修改入口与出口点

在这里插入图片描述

新建 webpack.config.js (注意路径)

//在里面添加
const path = require('path')

module.exports = {
  entry: './src/main.js', //入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), //出口文件
    filename: 'bundle.js', //出口文件名
  },
}

修改成功

在这里插入图片描述

隔行变色

下载jquery
npm add jquery
新建public/index.html - 前端首页

<!DOCTYPE html>
<html lang="en">
  <head>
    <Meta charset="UTF-8" />
    <Meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <Meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>Document</title>
  </head>
  <body>
    <div id="myUL">
      <!-- ul>li{我是第$个li}*10 -->
      <ul>
        <li>我是第1个li</li>
        <li>我是第2个li</li>
        <li>我是第3个li</li>
        <li>我是第4个li</li>
        <li>我是第5个li</li>
        <li>我是第6个li</li>
        <li>我是第7个li</li>
        <li>我是第8个li</li>
        <li>我是第9个li</li>
      </ul>
    </div>
  </body>
</html>

新建src/main.js - webpack打包入口
index.html 准备一些li
在src/main.js引入jqueryimport $ from 'jquery'
main.js中编写, 隔行变色代码

$('#myUL li:even').css('color','red') //奇数筛选
$('#myUL li:odd').css('color','green') //偶数筛选

执行打包命令
把public/index.html手动复制到dist下
再手动引入打包后bundle.js

webpack-插件-自动生成html文件

下载 npm add html-webpack-plugin@5.3.1 -D
webpack.config.js配置

const path = require('path')
// 引入自动生成 html 的插件
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
  entry: './src/main.js', //入口文件
  output: {
    path: path.resolve(__dirname, 'dist'), //出口文件
    filename: 'bundle.js', //出口文件名
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 以此为基准生成打包后html文件
      template: './public/index.html' //把对应路径的html进行打包
    })
  ]
}

重新打包后观察dist下

自动生成了html文件
自动引入打包后js文件

自动生成html和引入打包后文件, 应该怎么做?

下载 npm add html-webpack-plugin@5.3.1 -D 插件包, 给webpack.config.js配置上

说白了就是指定哪个html文件,给它生成到哪里去

webpack-加载器-处理css文件问题

在这里插入图片描述

webpack只识别js文件,默认无法打包css文件

webpack-加载器-处理css文件

css-loader 会对 @import 和 url() 进行处理，就像 js 解析 import/require() 一样。
style-loader 把 CSS 插入到 DOM 中
一起安装使用 npm add css-loader@5.2.1 style-loader@2.0.0 -D

在main.js中进行引入(入口文件)

import './css/index.css' //导入css代码

webpack.config.js 配置

module.exports = {
    // ...其他代码
    module: { // 如何处理项目中不同模块文件
        rules: [ // 规则
          {
            test: /\.css$/i, // 匹配所有的css文件
            // use数组里从右向左运行
            // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
            // 再用 style-loader 将样式, 把css插入到dom中
            use: [ "style-loader", "css-loader"]
          }
        ]
    }
}

运行打包命令

css代码被打包进了dist/bundle.js中
运行时, css代码插入到html的style标签中,样式可以正常生效

webpack-加载器-处理less文件

less-loader
webpack 将 Less 编译为 CSS 的 loader
首先，你需要先安装 less 和 less-loader

npm add less@4.1.1 less-loader@8.1.0 -D

webpack.config.js 配置

 module: { // 如何处理项目中不同模块文件
    rules: [ // 规则
      {
        test: /\.css$/i, // 匹配所有的css文件
        // use数组里从右向左运行
        // 先用 css-loader 让webpack能够识别 css 文件的内容并打包
        // 再用 style-loader 将样式, 把css插入到dom中
        use: ["style-loader", "css-loader"]
      },
      {
        test: /\.less$/i, // 匹配.less结尾文件
        // 使用less-loader, 让webpack处理less文件, 内置还会用less模块, 翻译less代码成css代码
        use: ["style-loader", "css-loader", 'less-loader'] //顺序不能乱
        // less-loader 把less文件转css文件和代码
        // css-loader 把css代码打包进js中
        // style-loader 把css代码 -> 插入 -> DOM中
      }
    ]
  }
}

main.js(入口文件引入)

import './less/index.less' //导入less代码

一共用了四个包处理css的包+处理less的包

webpack5-加载器-处理图片文件

资源模块

资源模块(asset module)是一种模块类型，它允许使用资源文件（字体，图标等）而无需配置额外 loader

在这里插入图片描述

webpack.config.js填写

module: {
    rules: [ 
        // ...省略其他
        {
            test: /\.(png|jpg|gif|jpeg)$/i, // 匹配图片文件
            type: 'asset' // 在导出一个 data URI 和一个单独的文件之间自动选择
            // 小于8kb的, 转成data URI(图片转成base64字符串打包进js中)
            // 大于8kb的, 直接复制文件到dist目录下(因为转base64会体积增30%)
        }
    ]
}

在src/main.js - 把大图插入到创建的img标签上, 添加body上显示

// 引入图片-使用
import imgurl from './assets/1.gif'
const theImg = document.createElement("img")
theImg.src = imgurl
document.body.appendChild(theImg)

在css/less/index.less - 把小图片用做背景图

body {
  background: url(../assets/images/logo_small.png) no-repeat center;
}

webpack如何支持图片打包
webpack5内置了, 只需要配置type:‘asset’
对图片有哪两种处理方案
默认8kb以下图片, 转成base64字符串打包进js中, 减少网络请求次数
超过8kb的图片, 直接复制到dist下, 转base64会增加30%体积

webpack-加载器-处理字体文件

webpack.config.js

 {
        test: /\.(eot|svg|ttf|woff|woff2)$/, //匹配以eot svg ttf woff woff2为结尾的文件
        type: 'asset/resource',  // 当做静态资源直接复制文件
        generator: {
          filename: 'font/[name].[hash:6][ext]' // 放到dist/font文件夹, 文件名格式如左
          // [name] 占位符,使用源文件的名字
          // [hash] 设置是会添加6位哈希值,防止重名
          // [ext] 代表源文件的扩展名
        }
      }

main.js(入口文件)

// 目标,打包和使用字体图标
import './assets/fonts/iconfont.css'
let thtI = document.createElement('i')
thtI.className = 'iconfont icon-qq'
document.body.appendChild(thtI)

在html设置字体图标

打包,得到结果

webpack-加载器-处理高版本js语法

让webpack, 对高版本js语法降级

babel-loader
此 package 允许你使用 Babel 和 webpack 转译 JavaScript 文件

babel编译器=> 用于处理高版本 js语法的兼容性
webpack配合babel-loader 对js语法做处理

src/main.js - 编写箭头函数

const fn = () => { // 高级语法
  console.log("你好babel");
}
console.log(fn) // 一定打印函数, 才会被webpack把"函数体"打包起来

安装对应包

npm add -D babel-loader@8.2.2 @babel/core@7.13.15 @babel/preset-env@7.13.15

在这里插入图片描述

webpack.config.js 配置

  {
            test: /\.js$/, // 匹配js结尾文件
            exclude: /(node_modules|bower_components)/, // 不转换这2个文件夹里的js
            use: { 
                loader: 'babel-loader', // 使用加载器-处理
                options: {
                    presets: ['@babel/preset-env'] // 预设:转码规则(用bable开发环境本来预设的)
                }
            }
        }

打包后观察dist/的js文件, 自动变成普通函数

在这里插入图片描述

webpack-开发服务器

在这里插入图片描述

构建入口和所有模块依赖关系图
磁盘读取对应的文件到内存, 才能加载
用对应的 loader 进行处理和翻译
将处理完的内容, 输出到内存里而非磁盘上
以后代码变化, 自动更新打包变化的代码, 显示到浏览器上

下载包

npm add webpack-dev-server@3.11.2 -D

webpack.config.js 配置

在这里插入图片描述

mode:'development', //开发环境,不加默认生产环境

package.json配置

scripts: {
	"build": "webpack",
	"serve": "webpack serve"
}

运行命令-启动webpack开发服务器
npm run serve

启动一个web服务器和端口, 在浏览器访问查看

效果: 以后改src下的代码, 自动打包更新到浏览器上

webpack-开发服务器-配置

webpack.config.js中添加服务器配置

module.exports = {
    // ...其他配置
    devServer: {
      port: 3000, // 端口号
      open: true // 启动后自动打开浏览器
    }
}

运行
npm run serve
端口号改变,html自动弹出

webpack官网地址:
https://webpack.docschina.org/

Webpack 2.2.0 rc3 发布，模块加载打包工具

Webpack 2.2.0 rc3 发布了，Webpack 是一款模块加载、打包工具，它能把各种资源，例如 JS（含 JSX）、coffee、样式（含 less/sass）、图片等都作为模块来使用和处理。

更新内容：

bug 修复

fixes chunk loading in old IEs
fixes error which prevented using arrow functions in require.ensure
fixes bug when passing function to rules.use
fixes bug for --progress output
fixes bug with export * and non-harmony modules
fixes bug when removing assets from the compilation

下载地址：

Source code (zip)
Source code (tar.gz)

我们今天的关于html里直接引用es6的js模块和不通过webpack等打包工具的分享已经告一段落，感谢您的关注，如果您想了解更多关于vue.js2.0实战(7):Webpack打包工具使用、vue.js不通过webpack/npm/yarn，直接加载单文件组建(.vue)、webpack (静态模块打包工具) 手记、Webpack 2.2.0 rc3 发布，模块加载打包工具的相关信息，请在本站查询。

本文标签：