vue继续学习+webpack+es6

[toc]

为什么

这个寒假实训,他们做的是多页面的设计,我打算改成spa的,而且因为学弟们基础不好就只能先使用spring的thymeleaf来控制路径,我呢就在研究如何把这个转化成spa,因为没有webpack的使用然后就很多东西都不能用.export import 都不能用,es6都是坑呀

webpack是时候了

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle

具体感受就是 使用import 和 export的js 会被打包成一个js文件,然后引入一个bundle.js 就可以了,这个只是初步的应用,还有更多应用的

概念

入口(entry)

指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始:可以多入口,然后这些入口一般都是import的

输出(output)

告诉 webpack 在哪里输出它所创建的 bundles，以及如何命名这些文件

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块
– 万物即模块:loader 能够 import 导入任何类型的模块,这是最大的好处,一般都是import .vue文件
–

   module: {
    rules: [
      ...(config.dev.useEslint ? [createLintingRule()] : []),
      {
        test: /.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test'), resolve('node_modules/webpack-dev-server/client')]
      },
      {
        test: /.(png|jpe?g|gif|svg)(?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      }
    }

插件(plugins)

插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。
想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项

webpack使用

entry

• 单页面应用:就app : './src/main.js , vendors : ./src/vendors'
  vue就是, vendor是第三方库
• 多页面:

  entry: {
  pageOne: './src/pageOne/index.js',
  pageTwo: './src/pageTwo/index.js',
  pageThree: './src/pageThree/index.js'
  }
  

output

和前边的截图差不多,也分多输出和单输出,毕竟没啥.
多输出是[name].js即可

loader

加载模块呀,预处理你import的模块
特性
– loader 支持链式传递。能够对资源使用流水线(pipeline)。一组链式的 loader 将按照相反的顺序执行。loader 链中的第一个 loader 返回值给下一个 loader。在最后一个 loader，返回 webpack 所预期的 JavaScript。
– loader 可以是同步的，也可以是异步的。
– loader 运行在 Node.js 中，并且能够执行任何可能的操作。
– loader 接收查询参数。用于对 loader 传递配置。
– loader 也能够使用 options 对象进行配置。
– 除了使用 package.json 常见的 main 属性，还可以将普通的 npm 模块导出为 loader，做法是在 package.json 里定义一个 loader 字段。
– 插件(plugin)可以为 loader 带来更多特性。
– loader 能够产生额外的任意文件。

loader 遵循标准的模块解析。多数情况下，loader 将从模块路径（通常将模块路径认为是 npm install, node_modules）解析。 要npm install 安装相应的库呀呀呀

模块

用过坑比的感受
– es2015 import
– CommonJs require
– AMD define require
– css中 @import
– url(), <img src

模块解析

“`javascript
import foo form ‘path/to/module’
require(‘path/to/module’)
import // 相对路径和绝对路径都行