webpack入门知识

 

Webpack是一个开源的JavaScript模块打包工具，其最核心的功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合并为一个JS文件（有时会有多个，这里讨论的只是最基本的情况）。这个过程就叫作模块打包。webpack是以commonjs来书写脚本的，但是对amd/cmd的支持也全面

目标：

理解它的『一切皆模块』的思想，并基本了解其常用配置选项和 loader 的概念/使用方法即可，下面的内容是17年的内容 需要与时俱进

1.路径中@的作用

import {QueryListPage} from '@main/screens/list';

　　webpack中配置resolve 选项，其中的 alias 用来表示进行模块引入时的别名， 用于指定当打包时遇到引入某个模块时，引入文件的实际路径或文件名，可以简化引入操作的参数。

resolve: {
  alias: {
    "@": "app/assets/javascripts/components",
  },
},

这样上面的引入路径就是 下面完整路径的缩写了 

import {QueryListPage} from 'app/assets/javascripts/components/main/screens/list';

 

一些实际应用注意

在 Vue 实例数据中仅仅使用图片路径不会使得 webpack 进行文件打包的操作，数组中的图片也必须作为模块引入，在其一切皆模块的思想下才会进行打包处理，因此图片列表的数组数据应该写成这样：

var products = [{
  img: require('@/assets/products/1.png'),
  name: 'Product 1'
}, {
  img: require('@/assets/products/2.png'),
  name: 'Product 2'
}, {
  img: require('@/assets/products/3.png'),
  name: 'Product 3'
}, {
  img: require('@/assets/products/4.png'),
  name: 'Product 4'
}]

webpack 打包时会自动按配置进行打包，给各个product 的 img 返回一个 base64 dataurl，或者将文件改名存储，并给各 img 返回一个字符串表示改名后的文件路径。

我们知道在项目配置中设置文件改名是为了消除浏览器缓存对应用发布的负面影响，如果这些产品图片文件“万年不变”，项目模板中还提供了一个 /static 目录，可以将产品图片拷贝到 /static/img/products 目录下，那么，产品列表的数组数据就不需要使用 require 将这些图片作为模块来引入了，但需要将路径改写为 /static/img/products，具体写法如下：

var products = [{
  img: '/static/img/products/1.png',
  name: 'Product 1'
}, {
  img: '/static/img/products/2.png',
  name: 'Product 2'
}, {
  img: '/static/img/products/3.png',
  name: 'Product 3'
}, {
  img: '/static/img/products/4.png',
  name: 'Product 4'
}]

/src/assets 和 /static 目录的区别详见​​Vue webpack 项目模板官方文档​​。

2.eslint 校验 xx is defined but never used

package.json中 添加

"rules":{
    'space-before-function-paren': 0,//函数定义时括号前面要不要有空格
    'indent': 0,//缩进
    'comma-dangle': [0, 'never'],//对象字面量项尾不能有逗号
    'handle-callback-err': 0,//nodejs 处理错误
    'object-curly-spacing': [0, 'never'],//大括号内是否允许不必要的空格
    'no-unused-vars': [0, {
    // 允许声明未使用变量
    'vars': 'local',
    // 参数不检查
    'args': 'none'
}],
}

View Code

 3.loader

loader能够将所有文件转换为js语言的模块

例子：对mp3格式的文件配置loader

{
test: /\.mp3(\?.*)?$/,
loader: 'url-loader',
options: {
limit: 10000,
name: utils.assetsPath('media/[name].[hash:7].[ext]')
  }
}

View Code

配置将会对低于 10000 字节的 mp3 文件使用 url-loader 加载器，而对等于或超过 10000 字节的 mp3 文件使用 file-loader 加载器

 

 

 

 

相关链接

​​https://zhuanlan.zhihu.com/p/25829687​​

​​https://zhuanlan.zhihu.com/p/26038486​​