webpack4学习笔记——基本配置及插件注解

webpack4学习笔记

---

准备工做

安装webpack、webpack-cli、webpack-dev-server,建立package.json,在package.json的scripts中建立build启动方式，因为准备将webpack.config.js放在build文件夹下。

配置以下：

"scripts": {
  "dev": "cross-env NODE_ENV=development webpack-dev-server --config build/webpack.config.js",
  "build": "cross-env NODE_ENV=production webpack --config build/webpack.config.js"
},

建立build文件夹，在其中建立webpack配置文件webpack.config.js。
注：webpack.config.js中entry、plugins等能够用到相对路径的地方，相对路径都是相对于根目录。

---

基础插件与处理

1. html部分

安装html-webpack-plugin，负责打包html文件

注意，在html文件中不须要手动引入打包后的js文件，html-webpack-plugin会自动将打包后的js文件引入html文件中

2. css部分

安装loader,如style-loader/css-loader/less-loader

注意，解析less除了安装less-loader还需安装less，提供运行环境

安装 mini-css-extract-plugin用于抽离css

安装postcss-loader、autoprefixer用于添加样式兼容性前缀

添加兼容性前缀的功能由autoprefixer完成，postcss-loader至关于一个loader的容器，autoprefixer配置在其中，使postcss-loader在加载css文件时能自动添加兼容性前缀

安装optimize-css-assets-webpack-plugin用于抽离css

注：此插件是配置在optimization.minimizer中，webpack4将大部分优化相关内容放在optimization中，又根据优化的具体内容划分为minimizer、splitChunks等模块。
注意，抽离的css没法自动压缩，所以后续需配置压缩抽离的css的插件

安装mini-css-extract-plugin用于压缩抽离后的css

此插件配置在plugins中

3. js部分

安装uglifyjs-webpack-plugin用于压缩js

因为抽离css时optimization.minimizer的配置，致使webpack4压缩的默认js相关配置被覆盖，所以须要手动配置js压缩，此插件也是放在optimization.minimizer中

安装babel-loader、@babel/core、@babel/preset-env

(加载器)、(核心模块，能够调用transform方法转换源代码)、(转化模块，es6->es5)

安装@babel/plugin-proposal-class-properties

@babel模块很大，所以最好按需下载模块，此模块为class的转换工具

安装@babel/plugin-proposal-decorators

class的装饰器

安装@babel/plugin-transform-runtime(dev环境)、@babel/runtime(生产环境)

babel只能转义ES6语法，好比箭头函数，可是遇到ES6新增的api就无能为力了，runtime可处理async、Promise、generater等新增API

安装@babel/polyfill

runtime没法处理实例上的方法，如'aaa'.includes('aa'),所以需使用@babel/polyfill，@babel/polyfill的使用方式较为特殊，并不是配置在插件中，可在须要的js文件中引入，或在entry中添加'@babel/polyfill'。

*注：polyfill、runtime做用都是实现ES6相关API，但polyfill是污染全局变量，runtime是使用局部变量，对于实例上的api，必须污染原型链上的全局变量，所以runtime没法处理。因为runtime是使用局部变量实现，假设多个地方使用了Promise,在使用的地方注入局部变量，势必会有大量重复代码，plugin-transform-runtime可经过一些helper函数的注入来减小语法转换函数的开销，如多处使用promise时，实现promise的方法指向同一处。*

4. 图片处理

安装file-loader或url-loader用于解析图片文件

webpack运行于nodejs，没法解析图片;若图片采用的是样式background:url('...'),此种背景图css-loader会进行解析;file-loader、url-loader均可以解析图片文件，file-loader是将图片拷贝至打包后的文件，url-loader与file-loader相比多了可将图片解析为base64放入文件中的功能,所以使用时通常添加limit,小于多少比特的文件采用转换base64(base64同常比原文件大1/3)，limit设为0的话，url-loader功能与file-loader没区别了

安装html-withimg-loader，用于解析html中img

若在html中添加img，图片地址为src目录下的draw.svg，直接打包的话打包后的文件中src地址仍指向src目录下的src,所以须要html-withimg-loader将html中的img指向的图片打包至dist；html-withimg-loader并不能直接解析图片文件，遇到html中的img标签时，html-withimg-loader需经过file-loader或url-loader对图片文件进行解析，并修改html中src的指向

5.不一样类型文件放入相应文件夹

将不一样类型文件放入相应文件夹，一般在打包的最后一步进行，如js文件的output，图片文件的url-loader中，css文件若没有minicss插件，通常默认打包到js文件中，若单独分离，最后一步为mini-css-extract-plugin插件处理，所以在此处设置

6. 代码规范

安装eslint eslint-loader(可在官网上勾选具体规则，下载配置,不配置会报错)

7. 暴露对象

若要将某个对象（如jquery）暴露于全局window下

• 安装并使用expose-loader

若要将对象暴露于每个模块

• 使用webpack.ProvidePlugin

8.sourceMap

若要在打包后文件的基础上查看原文件，则须要设置devtool，注意，生产环境若没在UglifyJsPlugin中设置sourcemap:true,即便设置了devtool也没法查看原文件（原文件可在F12->Sources->webpack:// 中查看,未设置则无此文件夹），devtool的类型有：

• source-map:大而全，会产生单独的map文件，可查看报错部分在原文件的行和列
• eval-source-map:不会产生单独的文件，但报错能显示行和列
• cheap-module-source-map:报错不会显示多少列，可是一个单独的映射文件
• cheap-module-eval-source-map: 不会产生文件，集成在打包后的文件中，报错不会显示多少列

9.resolve配置

详情见代码注释：

resolve: {
    // 解析第三方包只从node_modules查找
    // 如代码中import XX from 'xx';'xx'默认只在node_modules查找
    // 通常引用模块默认从当前目录的node_modules查找，找不到则沿着
    // 上一层目录去查找，此配置缩小查找范围
    modules:[path.resolve('node_modules')],
    // 通常import XX from 'xx',引入的路径都是在package.json中'main'配置里的路径，
    // 此配置可规定引入时先查找package.json下的哪一个路径
    // mainFields: ['style','main'],
    // 设置默认入口文件名字，默认是index,所以若配置main,此项目中依赖了'strip-ansi'包，该包package.json
    // 中未配置main,所以默认找index.js，此配置让这种场景默认找main.js，所以require('strip-ansi')报错
    // mainFiles: ['main'],
    // 引入文件时若未填写后缀，先找同名js，再找css，再json,依次从左到右
    // extensions: ['.js','.css','.json'],
    alias:{
        //别名，代码中'@/'直接指向src目录
        '@':path.resolve(__dirname,'../src'),
    }

10.经常使用插件

安装cleanWebpackPlugin(打包前清空dist)

安装copyWebpackPlugin(文件直接复制)

bannerPlugin(版权声明插件，不用安装，webpack内置)

---

经常使用功能

一、代理

webpack代理功能可用于解决跨域问题，将浏览器到有跨域问题服务器的请求，转化为浏览器到无跨域问题的代理服务器，代理服务器到有跨域问题服务器的请求，其效果相似于nginx的proxy_pass；同源策略只针对浏览器，服务器到服务器的请求不会有跨域问题。
proxy配置只针对于开发环境，生产环境不会自动搭建服务器。

devServer中配置：

proxy:{
        //匹配/api接口，将其代理到http://localhost:8080
        // 方法1：
        //'/api':'http://localhost:8080'
        // 方法2：
        '/api':{
            target: 'http://localhost:8080',
            // 将路径替换，/api/name中的/api替换为空字符串
            pathRewrite:{
                '/api':''
            }
        }
    },

除此以外，还能够在nodejs搭建的服务器中，利用webpack-dev-middleware启动webpack,此时打包后的服务器与搭建的服务器同源，也不会引发跨域问题。

二、mock数据

利用devServer提供的生命周期钩子，在开发环境dev服务器上新增接口。

devServer中配置：

before(app){
        app.get(/^\/api/,(req,res)=>{
            res.json({data:'mock-data-before'})
            })
        }

3.实时打包

build完毕后服务不会马上结束，修改代码后可实时打包，至关于build版的热更新。

新增以下配置：

watch:true, // 实时打包，至关于build的热更新
    watchOptions:{
        poll:1000, //每1000毫秒轮询一次
        aggregateTimeout:300, //防抖，中止输入300ms后才更新
        ignored: /node_modules/, //不监控node_modules
    },

（混合开发APP时可将此功能与打包APP的热更新相结合？）

源码地址: https://github.com/goblin-pit...