WebPack

是ECMAScript/JavaScript代码中识别和报告模式匹配的工具，也就是检查代码规范的工具

配置相关插件：

npm i eslint@5.10.0 eslint-config-standard@12.0.0 eslint-loader@2.1.1 eslint-plugin-promise@4.0.1 eslint-plugin-node@8.0.0 eslint-plugin-html@5.0.0 eslint-plugin-standard eslint-plugin-import@2.14.0 -D

新建一个eslint配置文件：.eslintrc.js

module.exports = {    // 在当前目录层级上筛选    root: true,    // 筛选标准    extands: 'standard',    // 在哪些文件中筛选js文件    plugins: ['html', 'promise', 'node'],    // 设置环境    ebv: {        browser: true,        node: true    }}

babel 转换编译

配置步骤：

1. npm init

2. npm i webpack webpack-cli -D

3. 新建src文件夹，在该文件夹下设置入口文件

4. npm i babel-loader@7.1.5 babel-core -D

5. 新建webpack.config.js文件，进行配置，是专门给webpack打包工具配置的文件

   var path = require('path');module.exports = {
       entry: {
           app: './src/app.js'
       },
       output: {
           path: path.resolve(__dirname, 'dist'),
           filename: "[name].bundle.js"    },
       // 处理第三方文件
       module: {
           rules: [{
               // 用babel-loader处理以js为后缀的文件
               test: /\.js$/,
               use: 'babel-loader',
               // 排除node_modules里的js文件，提高打包效率
               exclude: /(node_modules)/
           }]
       }
   }
   

6. npm i babel-preset-env -D 不同的浏览器和平台对ES6，ES7，ES8的支持情况不一致， babel-preset-env可以按需加载插件，比起preset的其他版本更加灵活

7. 新建.babelrc文件，配置babel

• targets指定运行环境

• targets.node 指定node版本

• targets.browsers 指定浏览器版本

• modules 指定何种形式的模块，设置为false表示不转码模块

  {    "presets": [        ["env", {            // 指定运行环境            "target" : {                // 浏览器最新的两个版本运行                "browsers": ["lasty 2 versions"]            }        }]    ]}
  

9. npm i babel-polyfill -D 在有部分代码无法转码时使用垫片

• 在入口文件最顶部引入垫片import 'babel-polyfill';

11. webpack --mode none

全局 | 局部垫片

polyfill

babel默认只转换新的js语法，而不转换新的API（即方法和函数，比如generator、set、maps、symbol、promise等全局对象，以及一些定义在全局对象上的方法【Object.assign】，还有ES6新增的Array.from方法，babel也不会转码），所以需要使用babel-polyfill，为当前环境提供一个垫片，使各个浏览器保持相同的API：

• npm i babel-polyfill -D
• 在入口文件最顶部引入垫片：import 'babel-polyfill';
• 优点：一次性解决所有兼容性问题，而且是全局的

transform-runtime

在webpack中，babel-plugin-transform-runtime实际上是依赖babel-runtime，因为在babel编译过程中，babel-plugin-transform-runtime这个插件会自动polyfill ES5不支持的特性。

• 这些polyfill包就在babel-runtime这个包里。
• babel-runtime和babel-transform-runtime的区别是，前者是手动挡，每当转译一个API都需要手动加上require（‘babel-runtime’）；后者是自动挡，会由工具自动添加babel-transform-runtime

使用步骤：

1. 如果之前下载了polyfill，先卸载 npm uninstall babel-polyfill

2. 下载 npm i babel-runtime babel-plugin-transform-runtime -D 和 npm i babel-runtime -D。下载完之后package会自动添加babel-runtime 和 babel-plugin-transform-runtime的依赖

3. 在.babelrc中配置插件

       "plugins": [        "transform-runtime"    ]
   

4. webpack --mode none 

优点：

1. 无全局污染
2. 依赖统一，按需引入，无重复引入，无多余引入（polyfill是各个模块共享）
3. 适合用来编写lib（第三方库）类型的代码

处理CSS

style-loader

配合css-loader使用，将模块的导出作为样式添加到 DOM 中

分类：

1. style-loader：以标签的形式插入到页面中
2. style-loader/url：以link标签的形式在html中插入。这种方式不推荐，因为在js文件中引入多个css文件会生成多个link标签，而html每个link标签都会发送一个网络请求。

• 这种方式配合使用的就不是css-loader了 ，而是file-loader

4. style-loader/useable：这种方式会有use（）和unuse（）两个方法，决定是否引入样式

options配置：

• singleton：将嵌入的多个css文件样式合并到一个样式里
• attrs：在样式标签上添加属性
• insertInto：将style标签插入到特定标签中
• insertAt：top | bottom，决定样式标签插入的位置
• transform

css-loader

解析CSS 文件后，使用 import 加载，并且返回 CSS 代码

options配置：

• modules：是否模块化 modules: true

• 模块化之后，会将类名变成哈希值，不会污染全局的类名

• 给元素设置类名就在入口文件中设置即可

• 

但是className方法只能设定一个类名，如果要引入多个类名，就需要composes

.box1 {    composes: box2 from './b.css';    width: 400px;    height: 400px;    background-color: red;}

document.getElementById('app').className = a.box1;

这样就两个类都引入了

编译顺序是先用css-loader将css代码编译，然后交给style-loader插入到html中去

file-loader

将文件（一般以图片文件为主，还包括字体文件等），在进行一些处理后，移动到输出文件夹

配置：webpack.config.js

var path = require('path');
module.exports = {
    entry: {
        app: './src/app.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[name].bundle.js'
    },
    module: {
        rules: [{
            test: /\.css$/,
            use: [{
                loader: 'style-loader'
            },{
                loader: 'css-loader'
            }],
            exclude: /(node_modules)/
        }]
    }
}

在webpack中解析是从下到上解析的，所以先写style-loader，再写css-loader

在app.js文件顶部引入css文件，通过css-loader将文件引入，style-loader将文件动态插入到html中

import a from './css/a.css';

Postcss

将css解析成JavaScript可以操作的抽象语法树结构（Abstract Syntax Tree），可以使用插件去转换css

常用插件：

Autoprefixer：用于添加浏览器特定前缀，处理兼容性

postcss-cssnext：使用css将来版本中可能会加入的新特性（包含Autoprefixer）

cssnano：压缩优化css

Autoprefixer插件安装步骤：

1. 将上一个项目复制过来，有了package.json的配置信息，可以直接npm install安装

2. 下载postcss：npm i postcss@7.0.6 postcss-cssnext@3.1.0 post-loader@3.0.0 cssnano@4.1.7 autoprefixer@9.3.1 -D

3. 新建postcss配置文件，postcss.config.js，配置插件

4. webpack.config.js中也添加配置信息

   {    loader: 'postcss-loader'}
   

5. 运行之后可以看到兼容性已自动添加

postcss-cssnext和cssnano安装：

和上一个插件差不多，把postcss.config.js的配置修改一下即可

要注意的是，postcss-cssnext已经包含了autoprefixer了，之前autoprefixer的配置可以删除

可以看到设置的自定义属性，还是可以正常使用的

:root {    --fontSize: 30px;}

.box {    width: 400px;    height: 400px;    font-size: var(--fontSize);    background-color: red;    transition: width .2s linear;    transform: rotate(10deg);}

Sass、Less

安装： npm i less less-loader sass sass-loader -D

同样在webpack配置文件中添加配置

loader: 'sass-loader'

使用less语法，能够被正常解析

@homecolor: pink;html {    background-color: @homecolor;}

sass同理，要注意的是引入的包是sass-loader，sass文件后缀是scss

图片处理

url-loader

会将引入的图片编码，根据需求选择性把某些小图片编码成base64格式，写进页面，从而减少服务器请求，优化性能。

也就是说有两种工作情况：

1. 文件大小<limit参数，将文件转为DataURL
2. 文件大小>limit参数，url-loader会调用file-loader进行处理

是增强版的file-loader，url-loader包含了file-loader

使用步骤：

1. 安装

2. 配置webpack，在rules最顶部配置，防止出错

3. 在入口文件中往html动态插入图片

   var app = document.getElementById('app');
   app.innerHTML = "<div class='item1'></div><div class='item2'></div><div class='item3'></div><div class='item4'></div>";
   

4. 运行文件，file-loader会将图片放到dist文件夹中。

• 此处我们设置了文件路径，图片会挡在dist下面的imgs中，因为publicPath和outputPath结合起来就是dist/imgs
• 但是对于file-loader来说，limit是没有什么用的。换成url-loader就可以生效

url-loader和file-loader配置方法一致

image-webpack-loader压缩图片

npm i image-webpack-loader -D

配置：

插件

生成HTML - html-webPack-plugin@3.2.0

options：

• template：本地模板文件的位置，重写一份和模板一样的文件
• filename：输出文件的文件名称
• minify：压缩代码
• chunks： 允许插入到模板中的一些chunk，允许引入哪个入口文件所生成的js文件
• inject：向template或templateContent注入所有静态资源

**处理html文件中的图片 ：**html-loader@0.5.5

 自动处理文件路径

options：attrs：[img：src]

清除文件插件：clean-webpack-plugin@1.0.0

由于每次运行完都会生成新的js文件，使用这个插件可以清除dist文件夹，再重新生成文件，使用方法很简单，传入要清理的文件夹即可

var path = require('path');
var HtmlWebpackPlugin = require('html-webpack-plugin');
var CleanWebpackPlugin = require('clean-webpack-plugin');
module.exports = {
    entry: {
        app: './src/app.js',
        main: './src/main.js'
    },
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "[name].[hash:5].js"
    },
    module: {
        rules: [{
            test: /\.html$/,
            use: {
                loader: "html-loader",
                options: {
                    // 对img标签的src进行处理
                    attrs: ["img: src"]
                }
            }
        },{
            test: /\.jpg$/,
            use: {
                loader: "file-loader",
                options: {
                    name: "[name]-[hash:5].[ext]"
                }
            }
        }]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: "./index.html",
            filename: "app.html",
            chunks: ['app'],
            // 将js文件插入到body标签里面
            inject: "body"
        }),
        new HtmlWebpackPlugin({
            template: "./index.html",
            filename: "main.html",
            chunks: ['main']
        }),
        new CleanWebpackPlugin(['dist'])
    ]
}

插件配置完之后dist文件就会多出来index.html和图片文件

提取css样式

1. extract-text-webpack-plugin@next

fallback：当不提取的时候用什么方式加载到页面中
use：提取的方式处理css

使用这个插件之前，首先应该要在路口文件将css文件引入进来

import a from './css/a.css';import b from './css/b.less';

webpack配置如下：

var ExtractLess = require('extract-text-webpack-plugin');var CleanWebpackPlugin = require('clean-webpack-plugin');

        {            test: /\.css$/,            use: ExtractCss.extract({                // 将css文件以require的形式加载到入口文件中                fallback: {                    loader: 'style-loader'                },                use: {                    loader: 'css-loader'                }                            })        },{            test: /\.less$/,            use: ExtractLess.extract({                // 将css文件以require的形式加载到入口文件中                fallback: {                    loader: 'style-loader'                },                use: [{                    loader: 'css-loader'                },{                    loader: 'less-loader'                }]            })        }

        new ExtractCss({            filename: '[name]-[hash:5]-one.css'        }),        new ExtractLess({            filename: '[name]-[hash:5]-two.css'        }),

**2. mini-css-extract-plugin@**0.4.5

使用方法：

var MinicssEctractPlugin = require('mini-css-extract-plugin');

        {            test: /\.css$/,            use: [{                loader: MinicssEctractPlugin.loader            },{                loader: 'css-loader'            }]        },{            test: /\.less$/,            use: [{                loader: MinicssEctractPlugin.loader            },{                loader: 'css-loader'            },{                loader: 'less-loader'            }]        }

        new MinicssEctractPlugin({            filename: '[name]-[hash:5]-one.css'        }),

使用成功后就会在dist文件夹下出现打包后的文件

引入库

1. bootstrap@3.3.7

使用npm i命令下载

在入口文件通过import引入css文件：

import 'bootstrap/dist/css/bootstrap.css';

我们可以在引入的库中看到文件目录：

字体文件需要相关的loader解析，也就是file-loader

var path = require('path');var HtmlWebpackPlugin = require('html-webpack-plugin');var CleanWebpackPlugin = require('clean-webpack-plugin');module.exports = {    entry: {        app: './src/app.js'    },    output: {        path: path.resolve(__dirname, 'dist'),        filename: '[name].bundle.js'    },    module: {        rules: [            {                test: /\.css$/,                use: {                    loader: 'style-loader'                }            },{                test: /\.css$/,                use: {                    loader: 'css-loader'                }            },{                // 利用file-loader处理字体文件                test: /\.(eot|svg|ttf|woff|woff2)$/,                use: [{                    loader: 'file-loader',                    options: {                        name: 'app.[ext]'                    }                }]            }        ]    },    plugins: [        // 以index.html为模板，在dist中创建app.html        new HtmlWebpackPlugin({            template: 'index.html',            filename: 'app.html'        }),        new CleanWebpackPlugin(['dist'])    ]

效果如下：

2. jQuery

通过npm i下载jQuery库

引入jQuery

import $ from 'jquery';

webpack.ProvidePlugin

上例中必须要通过import引入模块，webpack.ProvidePlugin不需要，它是webpack的内置模块，使用webpack.ProvidePlugin加载的模块在使用时不再需要import和require进行引入

var webpack = require('webpack');

        new webpack.ProvidePlugin({            $: 'jquery'        })

没有通过npm下载库，找不到路径没有关系，可以通过手动修改路径，引入本地文件

    resolve: {        alias: {            jquery$: path.resolve(__dirname, 'libs/jquery.min.js')        }    }

imports-loader

允许使用依赖于特定全局变量的模块，对依赖全局变量$，或this作为window对象的第三方模块非常有用

但是这种方法还是要用import引入，resolve也要配置路径，还是第一种方法更简单点

                test: path.resolve(__dirname, 'libs/jquery.min.js'),                use: {                    loader: 'imports-loader',                    options: {                        $: 'jquery'                    }                }