webpack从零开始第5课:模块篇

摘要：目录第课安装和第课配置文件第课做为的一个模块来使用第课插件篇第课模块篇第课在开发中使用本文参考文档官方模块配置模块配置中文翻译模块配置中文翻译版本官方内置清单第三方清单代码托管及用法配置官方文档模块总览我是首页万事开头

webpack目录

第1课: 安装webpack和webpack-dev-server

第2课: 配置文件

第3课: 做为node的一个模块来使用

第4课: 插件篇

第5课: 模块篇

第6课: 在Vue开发中使用webpack

本文参考文档

官方模块配置   模块配置中文翻译   模块配置中文翻译(版本2)

官方内置loader清单   第三方loader清单

eslint-loader代码托管及用法     eslint配置官方文档

模块总览

babel-loader

vue-loader

url-loader+file-loader

html-loader

postcss-loader + css-loader + style-loader

console.log("我是首页");
document.write("万事开头难")
const AA = {
    name:"张学友",
    city: "香港"
}
const BB = {
    ...AA,
    age:40,
    song:"吻别"
}
document.write(BB.name)

官方网站: http://babeljs.io/
代码托管: https://github.com/babel/babel
babel-loader参考: https://webpack.js.org/loader...
babel讲解参考阮一峰老师文章: http://www.ruanyifeng.com/blo...

babel核心是必装，如果在命令行下工作，还得安装babel-cli，babel-loader其实是就调用的它
cnpm i babel-core -D

babel-loader是webpack中的一个专为babel写的加载器
cnpm i babel-loader -D

babel有很多预置，不同的预置有不同的功能，在https://github.com/babel/babel/tree/master/packages中可以看到，有很多预置(以babel-preset-开头的)
对于es2015,es2016,es2017,env,stage-0,stage-1,stage-2,stage-3的理解，可参考https://www.cnblogs.com/chris...，为了方便，我使用env和stage-0，它包括其它几个stage
cnpm i babel-preset-env babel-preset-stage-0 -D

比如我想用对象的rest属性和spread属性，如下例子

let { x, y, ...z } = { x: 1, y: 2, a: 3, b: 4 };

得安装插件transform-object-rest-spread http://babeljs.io/docs/plugins/transform-object-rest-spread/
cnpm i babel-plugin-transform-object-rest-spread -D

主要是将上面安装的预置和插件放到配置文件中
方式一: 多带带的.babelrc文件或.babelrc.js

{
    "presets": [ "env", "stage-0"],
    "plugins": [ "transform-object-rest-spread"]
}

方式二：在项目的package.json中

{
  "name": "webpack2017",
  "version": "1.0.0",
  "description": "",
  "main": "index.js",
  "scripts": {
    "abc": "webpack --config ./build/webpackfile.js",
    "kkkk": "webpack-dev-server --config ./build/webpackfile.js --hot",
    "tttt": "node build/build.js",
    "test": "echo "Error: no test specified" && exit 1"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "babel-loader": "^7.1.2",
    "babel-plugin-transform-object-rest-spread": "^6.26.0",
    "webpack": "^3.10.0"
  },
  "babel" :{
    "presets": [ "env", "stage-0"],
    "plugins": [ "transform-object-rest-spread"]
  }
}

因我是用vue开发的，不是react来开发应用的，所以这里只讲vue，在https://webpack.js.org/loader...，vue-loader是第三方加载器，第三方加载器全部入在
https://github.com/webpack-co...，这个加载器是由vue官方维护，地址是:https://github.com/vuejs/vue-...

文档 :https://vue-loader.vuejs.org/...
代码托管: https://github.com/vuejs/vue-...
说明1：vue-loader是为vue服务的，前提是你安装了vue

作用: 对将图片|视频音频|字体进行base64编码，它有一个参数limit来决定是否要将文件进行base64编码，当不用编码时，就调用file-loader进行后续处理
在js文件中直接使用图片

//下面代码放在 D:3www2018studywebpack2018	odaywanghome.js
//logo.jpg放在 D:3www2018studywebpack2018	odayimages/logo.jpg  
var imgUrl = require("../images/logo.jpg"),
document.body.innerHTML = "";

上面是webpack的一个很有用的功能，将图片当作模块直接require，如果没有安装url-loader会报语法错

ERROR in ./today/wang/home.js
Module build failed: SyntaxError: D:/03www2018/study/webpack2018/today/wang/home.js: Unexpected token, expected ; (21:8)

在https://webpack.js.org/loaders下找到url-loader，看看它的用法

当没有设limit选项，或设了limit时但图片的大小小于limit，这两种情况才会将图片转为base64数据，不满足这两个条件，图片还是使用file-loader来处理

{
        test: /.(png|jpg|gif)$/,
        use: [
          {
            loader: "url-loader",
            options: {
              limit: 8192
            }
          }
        ]
      }

作用：将html文件中图片`,替换成require(".logo.jpg")的方式导入,如
模板文件中 ，配置文件中{test: /.html$/, use: {loader: "html-loader",options: { attrs: [":data-src123"]}}} 也就是attrs中的配置与模板中data属性一致时，会以require()的方式导入图片，模板中没有设置相应data属性的图片，html-loader忽略，不当作模块加载，html-loader最后返回的值是这样的

module.exports = "               	    ";

作用:
参数:

context: 如不配置，就使用全局的context，也就是webpack配置文件对象的context
name: "huang/img/[name].[hash:7].[ext]"
regExp:
outputPath:"zhangsan/lisi/", //可以是字符串，也可以是函数，后面的/不能省
useRelativePath:true|false，是否使用相对路径

// 最后生成完整文件名是 context+ outputPath + name

安装: cnpm i -D eslint eslint-loader
注意：如果同时使用babel-loader和eslint-loader，得先执行eslint-loader，否则会出错，正确的顺序如下

{
        test: /.js$/,
        exclude: /node_modules/,
        use: [
          "babel-loader",
          "eslint-loader", // 顺序是 自底向上执行
        ],
      },

保险的做法是，将eslint多带带配置

{
    test: /.js$/, // 对js文件使用eslint来检查代码的规范
    loader:"eslint-loader",
    enforce: "pre", // 但为了保险，建议多带带给eslint-loader指定pre值，有关loader的优先级，参考https://webpack.js.org/configuration/module/#rule-enforce
    include: [path.resolve("src")], // 只有些目录下的js文件才使用eslint-loader
    options: {
    }
},

eslint配置文件
eslint在执行是会寻找它的配置，它的配置放在哪里呢？
一般放在package.json的eslintConfig部分，也可以多带带放在 .eslintrc.*的文件中，如.eslintrc.js
下面以放在package.json中为例

{
  "name": "webpack2017",
  "devDependencies": {
  },
  "eslintConfig":  {
    "root": true,
    "parserOptions": {
      "sourceType": "module"
    },
    "extends": "standard",
    "env": {
     "browser": true
    },
    "rules": {
      "generator-star-spacing": "off"
    }
  }
}

但放在package.json，不是很方便，建议放在.eslintrc.js中，只要输出一个对象就行，写起来比较灵活，如

// https://eslint.org/docs/user-guide/configuring
// 请先安装本配置文件依赖的模块,cnpm i -D babel-eslint eslint-plugin-html 
// airbnb规则要装 cnpm i -D eslint-config-airbnb eslint-plugin-import eslint-plugin-jsx-a11y eslint-plugin-react
// standard规则要装 cnpm i -D eslint-config-standard eslint-plugin-node eslint-plugin-promise eslint-plugin-standard
// 我个人喜欢standard

module.exports = {
  root: true,
  parser: "babel-eslint", // 默认的解析器为espree,这里指定为 babel-eslint，参考 https://github.com/babel/babel-eslint
  parserOptions: { // 解析器的选项，默认支持  ECMAScript 5
    sourceType: "module"
  },
  env: {
    browser: true, // 环境定义为浏览器
  },
  // https://github.com/standard/standard/blob/master/docs/RULES-en.md
  extends: "standard", // 使用哪个规则文件，可选 的有standard|airbnb   eslint-config-airbnb(它需要安装 eslint-plugin-import,eslint-plugin-jsx-a11y, eslint-plugin-react)
  // required to lint *.vue files

  plugins: [ //第3方插件 eslint-plugin-html，
    "html"
  ],
  // add your custom rules here
  rules: {
    // allow async-await
    "generator-star-spacing": "off",
    // allow debugger during development
    "no-debugger": process.env.NODE_ENV === "production" ? "error" : "off"
  }
}