webpack基础

• 概述：less文件webpack不能解析，需要loader编译解析

• 创建less文件

• src/less/test1.less

• src/less/test2.less

• 入口文件引入less（直接引入，不需要from）

• 安装loader

• npm install css-loader style-loader less-loader less -D

• 配置loader

const {

resolve

} = require(‘path’); //node内置、这个模块也是基于node的

module.exports = {

entry: ‘./src/js/index.js’,

output: {

path: resolve(__dirname, ‘dist’),

filename: ‘bundle.js’

},

//所有的loader都要在module对象中的rules属性中rules

//是一个数组，数组中的每一个对象就是一个loader

//loader不需要引入

module: {

rules: [{

test: /.less$/i, //匹配所有的less文件夹

use: [//字段用loader会报错，用use

// compiles Less to CSS、简写方式、完整看官网

‘style-loader’, //创建style标签，添加上js中的css代码

‘css-loader’, //将css以commonjs方式整合到js文件夹中

‘less-loader’, //使用lessloader，将less编译为css

],

}, ],

},

mode: ‘production’,

}

• 运行指令：webpack

最新的webpack5没有eslint-loader

• 概述:对js基本语法错误/隐患，进行提前检查

• 安装loader(webpack5文档里已经没有这个loader了)

• npm install eslint-loader eslint -D

• 备注：在eslint中文官网查看配置和规则

• 配置loader（rules的一个对象）

module.exports = {

// …

module: {

rules: [

{

test: /.js$/,

exclude: /node_modules/,

loader: “eslint-loader”,

//options: {

// eslint options (if necessary)

//}

}

]

}

// …

};

• 修改package.json(需要删除注释才能生效、参考vue配置不写在options里)

“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推荐的默认规则

}

• 运行指令：webpack

• 概述：将浏览器不能识别的新语法转换成原来识别的旧语法，做浏览器兼容处理

• 安装loader

• npm install babel-loader @babel/core @babel/preset-env -D

{

test: /.m?js$/,

//test: /.js$/,

exclude: /node_modules/,

use: {

loader: ‘babel-loader’,

options: {

presets: [‘@babel/preset-env’]

}

},

}

• 运行指令：webpack

最新的bable已经删除polyfill

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

• 安装包

• npm install @babel/polyfill

• 使用

//入口文件

import ‘@babel/polyfill’;//包含ES6的高级语法的转换，不管用了哪些新语法，全部的新语法都转换了

• 优点：解决babel只能转换部分低级语法问题，（如：let/const/解构赋值。。。），引入polyfill可以转换高级语法（如：Promise）

• 缺点：将所有高级语法都进行了转换，实际上可能只使用了一部分

• 解决：需要按需加载（使用了什么高级语法，就转换什么，而其他的不转换）

第二种方法：借助按需引入core-js按需引入

• 安装包

• npm install core-js

• 配置loader

{

// test: /.m?js$/,

test: /.js$/,

exclude: /node_modules/,

use: {

loader: ‘babel-loader’,

options: {

presets: [

[

‘@babel/preset-env’,

{

useBuiltIns: ‘usage’, //按需引入需要使用polyfill

corejs: {

version: 3//解决warning

},

targets: { //指定兼容性处理哪些浏览器

“chrome”: ‘58’,

“ie”: “9”

}

}

]

],

// cacheDirectory: true,//开启babel缓存

}

},

}

最新的webpack5没有file-loader、没有url-loader

• 概述：图片文件webpack不能解析，需要借助loader编译解析

• 添加2张图片：一张小于8kb、一张大于8kb

• 通过背景图方式引入图片

• 安装loader

• npm install file-loader url-loader -D

• 补充：url-loader是对象file-loader的上层封装，使用时需配合file-loader使用。

• 配置loader

{

test: /.(png|jpg|gif)$/,

use: [

{

loader: ‘url-loader’,

options: {

limit:8192,//8kb–>8kb以下的图片会base64处理

outputPath:‘images’,//决定文件本地输出路径

publicPath:‘…/build/images’//决定图片的url路径

name:‘[hash:8].[ext]’//修改文件名称hash值取8位[ext]文件扩展名

},

},

],

},

• 运行指令：webpack

• 概述：html文件webpack不能解析，需要借助插件编译解析

• 注意不要在html中引入任何css和js文件

• 安装插件Plugins

• npm install html-webpack-plugin -D

• 在webpack.config.js中引入插件（插件都要手动引入，而loader会自动加载）

• const HtmlWebpackPlugin = require(‘html-webpack-plugin’)

• 配置插件Plugins

plugins:[

new HtmlWebpackPlugin({

template:‘./src/index.html’,//以当前文件为模板创建新的HTML（1.结构和原来一样，2.会自动引入打包的资源）

})