webpack学习2：webpack配置文件_解析less,eslint语法检查以及js兼容性处理

使用webpack配置文件

1、基础配置

从上一篇webpack学习1（从webpack专栏中可以看到）知道，在我们使用webpack的时候，通常通过以下语句进行编译：

//开发配置指令：能打包和编译js以及json文件，并且能把es6的模块化语法转换成浏览器能识别的语法
webpack 源地址/index.html -o 目标地址/index.html --mode development

//生产配置指令：在开发配置指令的基础上加压缩代码
webpack 源地址/index.html -o 目标地址/index.html --mode production

我们可以看到其实这样的语句是很长的，有没有一种办法，可以缩短指令语句，通过一句webpack直接编译呢，这些都是可以通过配置webpack配置文件达到的，同时通过配置webpack配置文件，可以解决webpack只能编译js和json，而不能编译css以及img文件的缺点（具体看上一篇~）

webpack.config.js

配置webpack文件，通常是自己新建一个文件，文件名为webpack.config.js

\\使用common.js语法，因为webpack是基于node.js环境的，所以这里用的不是es6的模块化语法，而是common.js
const path=require('path')//node内置用于解决绝对路径问题
module.exports={
    entry:'./src/js/index.js',//入口文件位置
    //entry完整版写法：
    //entry:{main:'./src/js/index.js'},//入口文件位置
    output:{
        path:path.resolve(__dirname,'dist'),//输出路径的绝对路径
        filename:'index.js'//输出的文件名字
    },
    mode:'production'//二选一，还有development模式
}

配置完之后，直接在文件夹的终端输入webpack，直接运行进行打包

2、Loader配置

2.1 less-loader解析less

之前我们在写less文件的时候，通常解析成css，然后通过link引入html文件中，但是在webpack中就不需要再这样用link引入了；

在入口文件中引入样式，不用变量接，不用写from，比如，在入口文件中引入json时写法如下：

import a from '../json/test.json'

在入口文件中引入样式，写法如下：

import '../css/index.less'

然后配置webpack,这里需要先安装less-loader

npm install css-loader style-loader less-loader less --save-dev 

然后修改webpack.config.js:

module.exports={
   ···
   //所有的loader都要在module对象的rules属性中
   //rules是一个数组，每个数组中的每个对象就是一个loader
   //具体的loader配置可以参考文档
   //loader不需要引用，只需要声明
   module:{
    rules:[{
		test: /\.less$/, // 检查文件是否以.less结尾（检查是否是less文件）
		use: [  // 数组中loader执行是从下到上，从右到左顺序执行
		  'style-loader', // 创建style标签，添加上js中的css代码
		  'css-loader', // 将css以commonjs方式整合到js文件中
		  'less-loader'  // 将less文件解析成css文件
		]
	},]
   }
}

最后运行指令webpack

2.2 eslint-loader语法检查

之前写代码都是通过浏览器报错检查，但是有些代码浏览器是不会报错的，也能运行，但是语法是有问题的，比如：

console.log(b);;;;;;;

vue用的ESLint，react用的JSLint进行语法检查

• 安装loader

  npm install eslint-loader eslint --save-dev
  

  备注：eslint.org网站->userGuide->Configuring ESLint查看如何配置/Rules查看所有规则
• 配置loader

module.exports={
   ···
   module:{
    rules:[
        ...
        {
        test:/\.js$/,//匹配所有的js文件，这个是个正则表达式
        exclude:/node_modules/,//把这个文件夹中的代码排除掉，不写这一句运行会非常慢
        use:{//使用eslint-loader
            loader:'eslint-loader'
        },
        enforce:'pre',//提前加载使用
    }]
   }
}

• 然后需要配置package.json(需要删除注释才能生效)

  "eslintConfig": {
  	"parserOptions": {
  	  "ecmaVersion": 6, 		// 支持es6
  	  "sourceType": "module"	// 使用es6模块化
  	},
  	"env": { // 设置环境
  	  "browser": true,   // 支持浏览器环境： 能够使用window上的全局变量
  	  "node": true       // 支持服务器环境:  能够使用node上global的全局变量
  	},
  	"globals": {	// 声明使用的全局变量, 这样即使没有定义也不会报错了
  	  "$": "readonly"	// $ 只读变量
  	},
  	"rules": {  // eslint检查的规则  0 忽略 1 警告 2 错误
  	  "no-console": 0, 	// 不检查console
  	  "eqeqeq": 2,	// 用==而不用===就报错
  	  "no-alert": 2 // 不能使用alert
  	},
  	"extends": "eslint:recommended" // 使用eslint推荐的默认规则 https://cn.eslint.org/docs/rules/
  },
  

• 最后运行指令：webpack

2.3 js语法转换

webpack只管翻译es6的模块语法变成浏览器认识的，但是不会处理其他新语法

• 概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容性处理
• 安装loader
  • npm install babel-loader @babel/core @babel/preset-env --save-dev
• 配置loader

  module: {
    rules: [
      {
        test: /\.js$/,
        exclude: /node_modules/,
        use: {
          loader: "babel-loader",
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  }
  

• 运行指令：webpack

2.4 js兼容性处理

无法控制用户用哪个浏览器，虽然2.3将es6的语法转成es5的语法，但是还没有达到彻底兼容，能处理一些简单的es6语法，但是像es6中的一些高级语法，比如promise很难做到兼容，如果想要在ie中进行兼容性处理（ie不支持promise），需要用到以下方法

第一种方法：使用经典的polyfill

先安装polyfill

npm install @babel/polyfill

在index.js中引入

//包含es6的高级语法的转换，一般放在最上方
import '@babel/polyfill'

但是上面的方法有个缺陷，不管编码人员用了哪些新语法，全新的新语法都转换，导致转换后的文件特别大

第二种方法：借助按需引入core-js按需引入（参考vue底层）

安装core-js

npm install core-js

配置loader:

{
	test: /\.js$/,
	exclude: /(node_modules)/,
	use: {
	  loader: 'babel-loader',
	  options: {
	    presets: [
	      [
	        '@babel/preset-env',
	        {
	          useBuiltIns: 'usage',  // 按需引入需要使用polyfill
	          corejs: { version: 3 }, // 解决warn
	          targets: { // 指定兼容性处理哪些浏览器
	            "chrome": "58",
	            "ie": "9",//react和vue用了很多新语法，ie8及ie8以下的都不支持，最好写10
	          }
	        }
	      ]
	    ],
	    cacheDirectory: true, // 开启babel缓存
	  }
	}
},