前言

前端发展到今天已经从当初简单的几个网页发展到更多的是把网页视为WebApp的模式，当业务逻辑复杂到一定程度的时候，就不得不考虑项目的可维护性，项目的多人协同，如何降低风险等等诸多问题；

试想一下，一个网站如果仅有几个展示页面，那么其实不管怎么写都没有什么问题，但是一旦页面有几十，上百，或者说虽然只有十几个页面，但是有N多个功能模块，那么还是一通写到哪算哪，那么问题就大了，一旦业务需求变了，改都甚至不知道从哪里开始改，又或者说不知道改了会不会对别的功能产生影响，因此前端工程化就应运而生；

简介

概述

webpack是一种工具，是帮助我们将前端工程化的一种工具，好吧，这里又提到了前端工程化，那么前端工程化到底改变了哪些方面？实际上，前端工程化主要改变了三个方面：

• 在工具上，需要用到更多的自动化机械，更多的脚手架；
• 在人员上，写作的人开始变的很多，需要有一定的机制保障合作的顺畅；
• 大量的用到预制模版，用组件化的方式写项目；

学到这里的时候，让我想到了Vue，实际上Vue也确实是前端工程化的产物，并且将前端开发模块化了，模块化之后，项目更适合多人协作开发，并且模块相对而言独立，方便后期维护；

那么回到主题，webpack既然是一种工具，那么它能做什么？
举个例子：当使用webpack将项目打包之后，它会自动的将项目中的es6写法替换成es5写法，这样可以兼容多个版本浏览器，又比如会将图片资源进行压缩，合并精灵图，甚至它会将我们在项目中没有使用到的方法进行删除，减少体积；
因此，总结以下，webpack主要做以下几点

• 编译，包括JavaScript的编译，css的编译；
• 文件的压缩，打包，合并，公共模块提取等；
• 图片等资源的处理，如压缩，合并精灵图；
• tree-shaking等优化javaScript工具（删除未用到的方法）
• webpack-dev-service，Eslink，热更新等帮助开发的工具

安装

在安装webpack之前，必须安装node（webpack依赖node），npm；

全局安装

//使用的是cnpm的安装方式
//mac加sudo，因为是全局安装
sudo cnpm install webpack webpack-cli -g

安装之后，可以通过如下命令查看是否安装成功

webpack -v

局部安装

为什么会有局部安装？因为全局的webpack有且只能有一个，但实际情况中，不同项目的webpack版本可能完全不同，当项目需求的webpack版本和安装的全局的webpack不一致时，就需要安装局部webpack;

局部webpack是指在项目文件夹下安装的webpack，即安装在项目文件夹里的node_modules里，vue的webpack就是局部安装，因此它可以不管你电脑上有没有装过webpack保证项目正常运行；

cd 指定项目文件夹
npm install webpack@3.10.0 --save
//通过@符号，指定webpack的版本
//通过--save命令，执行在局部安装webpack

局部安装的webpack通过配置package.json文件达到执行打包的时候优先按局部的规则进行打包

//打开package.json文件
//找到属性scripts
"scripts": {
  "test": "echo \"Error: no test specified\" && exit 1",
  "bulid":"webpack" //添加这一句话，属性名自定义，bulid是等会执行的属性名
},
//执行打包
npm run build 
//执行打包的时候会优先去局部的配置文件（也就是package.json）去找webpack版本进行打包
//如果找不到配置，才会去执行全局打包

创建

当然，现在流行的Vue这类前端框架，在用cli脚手架安装的时候天然就集成安装好了webpack，假如是遗留的老项目，或者非常简单的小项目完全用不到脚手架，那么

cd 项目的文件目录下

在该目录下手动创建一个js文件，命名为webpack.config.js，这个名字是固定的，不能改

打包

不利用配置打包

这种情况就是虽然在webpack.config.js写了很多很多规则，但是突然发现都不需要了，只需要按最基本的方式打包就满足需求了

//<entry>和<output>代表入口文件和出口文件
webpack-cli --entry <entry> --output <output>
  
//具体示例
webpack-cli --entry ./app.js --output ./bundle.js

以app.js为入口，所有最终关联到app.js的js文件统一打包成名为bundle.js，关于入口文件，出口文件下文会有详细解释

利用配置文件打包

再次强调，配置文件名必须是：webpack.config.js，通过webpack就可以直接打包

cd 指定文件夹 //在这个文件夹需要配置好相关webpack.config.js的配置文件

//假如时一个新项目，需要初始化一个package.json文件，如果已经有了则不需要再初始化
npm init -y  //初始化一个package.json文件 

webpack //打包

如果说，就不要以webpack.config.js为打包的规则，可不可以，也是可以的

//使用webpack的--config命令，指定文件为configfile
webpack --config configfile

核心概念

对于webpack，最重要的就是配置文件，也就是webpack.config.js这个文件，这个文件是最终webpack执行打包时的打包依据，如何打包，打包成什么样，按什么规则打包都是由这个文件控制的，假如没有配置文件，那么webpack就只能按最基础的打包，因为它不敢乱动文件；

对于正常的前端开发而言，使用webpack最主要的工作就是编写，修改webpack的配置文件，也就是编写，修改webpack.config.js这个文件（在vue中就是对于的vue.config.js这个文件）；

既然webpack.config.js这个文件是一个js文件，那么其内的语法当然使用的就是JavaScript语法，本质上这个文件就导出了一个对象，这个对象里有多个设定好的属性名，值就是设定的打包规则，先看一个最原始的配置文件

module.exports = {
	//配置内容
};

没有看错，这就是最简单的打包配置，也就是什么配置都没有，这种规则下，它只会按最基本的规则打包文件，它不会对文件有什么多余的操作，只是合并，压缩，减少最终项目的体积；

那么正常的配置文件应该是什么样的?它应有包含4个核心属性，分别是：分别是entry，output，loader，plugins

module.exports = {
  entry:{},
  output:{},
  //loader是一个对象，具体写的位置是在module对象下的rules数组内的
  module:{
  	rules:[]
  },
  plugins:[]
}

入口(entry)

**入口起点(entry point)**指示 webpack 应该使用哪个模块，来作为构建其内部_依赖图_的开始，比如在vue中app.js这个文件就是入口起点

//指定./path/to/my/entry路径下的file.js文件为打包入口文件
module.exports = {
  entry: './path/to/my/entry/file.js'
};

如果是多个文件需要作为入口文件打包，并不是Vue这种单页应用

module.exports = {
    //直接对应入口文件的路径
    entry:'./app.js'
    //将数组中的每一项合并打包成一个入口文件，注意是将多个合并成一个入口文件，本质还是单页面应用
    enrty:['./app.js','./app2.js'] 
    //最常用的
    entry:{
        //属性名随意写
        //指定了一个文件为入口文件，单入口文件
        app:'./app.js',
	    //当里面有多个属性的时候，会打包成多个入口文件，与数组不同，本质已经是多页面（多入口）文件了
        app2:'./app2.js' 
    }
}

出口(output)

output 属性告诉 webpack 在哪里输出它所创建的 bundles（打包后的文件），以及如何命名这些文件，默认值为 ./dist。基本上，整个应用程序结构，都会被编译到你指定的输出路径的文件夹中

//webpack.config.js
module.exports = {
    entry:{
        app:'./app.js'
    },
    output:{
        //必填，自定义名字，指定输出文件名，例子为指定输出的文件名为bundle.js
        filename:'bundle.js',
        //或者随机输出一个名字
        filename:'[name].[hash].js' ,
        /*
         *  [name]指定的是入口中的key值，也就是上面的app，
         *  [hash]根据前面的name生成一串hash字符串，
         *  如果觉得太长可以截取，比如[hash:4]，截取前4位
         */
        //filename也可以指定打包文件的存储路径
        filename:'./js/[name].[hash:6].js',
        //文件会被存储到打包文件夹下的js文件夹下，打包文件夹默认是dist文件夹

        //对输出的路径做修改，对应的修改属性是path，path接收一个绝对路径作为参数，不能是相对路径
        path:__dirname+'/src/mybundle'
        //__dirname代表当前这个配置文件的绝对路径
        //打包到当前这个文件下的src文件夹下的mybundle文件夹下
    }
}

loader

loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

loader的本质是一个方法，它会对内容按照方法的设定好的规则进行处理，使用的时候大多数需要额外安装

module.exports = {
    //loader存放在module对象中的rules数组里，rules数组里的每一项都代表了一个loader处理
    module:{
        rules:[
            {
                //定义的loader
                //test指定loader要处理什么类型的文件，值是一个正则
                test:/\.js$/,
                //use代表处理文件需要使用到什么样的loader
                use:'babel-loader',
                use:{
                    loader:'babel-loader',
                    options:{

                    }
                },
                //当对这个文件需要用到多个loader的时候可以使用数组，数组的每一项都是一个对象
                use:[{}]
            }
        ]
    }
}

常用loader

• css-loader，style-loader等css处理loader；
• url-loader，image-loader等图片、字体、文件等资源处理loader；
• less-loader，sass-loader，babel-loader等处理语法糖的loader;
• 还有一些其他的loader，比如vue-loader，ts-loader;

插件(plugins)

loader 被用于转换某些类型的模块，而插件则可以用于执行范围更广的任务。插件的范围包括，从打包优化和压缩，一直到重新定义环境中的变量。插件接口功能极其强大，可以用来处理各种各样的任务。

想要使用一个插件，你只需要 require() 它，然后把它添加到 plugins 数组中。多数插件可以通过选项(option)自定义。你也可以在一个配置文件中因为不同目的而多次使用同一个插件，这时需要通过使用 new 操作符来创建它的一个实例。

const HtmlWebpackPlugin = require('html-webpack-plugin'); // 通过 npm 安装
const webpack = require('webpack'); // 用于访问内置插件

const config = {
  module: {
    rules: [
      { test: /\.txt$/, use: 'raw-loader' }
    ]
  },
  plugins: [
    new HtmlWebpackPlugin({template: './src/'})
  ]
};

module.exports = config;

常用plugin

• 优化文件体积的插件：commonsChunkPlugin（提取公共模块），uflifyjsWebpackPlugin（减少js文件体积，删除无用代码等操作），PurifyCSS等；
• 额外功能插件：HtmlWebpackPlugin（在我们的打包结果之中再打包出一个html文件，并且把我们的打包文件自动引入html），HotModuleReplacementPlugin（热更新插件）

编译

编译，肯定是使用到了webpack的loader，而这些loader并不是webpack自带的，需要额外安装；

JavaScript的编译

编译ES6语法

虽然几年前的浏览器版本已经兼容es6了，但实际上老版本的浏览器大有所在（看看win7,xp的市场占有率就知道了），因此要么项目中不写es6语法，要么你针对的客户群确保使用的都是最近几年的浏览器版本，否则一旦项目中使用了es6的语法最好还是转换一下；

安装loader

cnpm install babel-loader @babel/core -save-dev

这里安装了两个模块，babel-loader和@babel/core，babel-loader是编译es6的load，@babel/core是babel-loader的编译核心（没错，是分开的，因此需要装两个）；
之后，还需要安装一个模块，@babel/preset-ent，@babel/preset是存储不同的js标准的规则集合，这边安装的是ent这个规则，因此通过npm安装就可以了（注意：有时候npm安装会出现很多问题，比如网络中断等等，国内强烈建议使用cnpm）

cnpm install @babel/preset-env -save-dev

配置使用

安装好了就是使用了

//安装好babel-loader之后，需要在配置文件，也就webpack.config.js中配置一下
module.exports = {
    entry:{
        app:'./app.js'
    },
    output:{
        filename:'bundle.js',
    },
    //loader存放在module对象中的rules数组里，rules数组里的每一项都代表了一个loader处理
    module:{
        rules:[
            {
                //定义的loader
                //test指定loader要处理什么类型的文件，值是一个正则
                test:/\.js$/,
                //use代表处理文件需要使用到什么样的loader
                use:{
                    //使用的loader是babel-loader
                    loader:'babel-loader',
                    //options代表对babel-loader的配置
                    options:{
                        //对loader进行presets配置,值是一个数组
                        //数组的每一项又是一个数组，这个的第一项代表presets的名称
                        //数组的第二项是一个对象，targets是针对哪些个目标进行配置，值是一个对象
                        //示例中的browsers代表针对市场上的浏览器进行配置，配置的对象是针对市场上浏览器份额大于1%的浏览器进行配置
                        presets:[
                            ['@babel/preset-env',{
                                //targets是preset的核心配置
                                targets:{
                                    browsers:['>1%'], //以浏览器为目标，这个最常用
                                    node:'10', //以node10版本为目标
                                    chrome:'59' //以chrome的59版本为目标
                                }
                            }]
                        ]
                    }
                },
                //当对这个文件需要用到多个loader的时候可以使用数组，数组的每一项都是一个对象
                // use:[{}]
            }
        ]
    },
    //它是一个数组
    plugins:[

    ]
}

targets对象是@babel/preset-env这个的配置核心，它存在的目的是告诉preset编辑的最终目标是什么样的，比如编译后的目标要兼容市场上所有市场占有率大于1%的浏览器（这个值具体怎么得到是官方提供的，不必细究）

那么是不是这样安装使用就可以将所有的es6都编译成es5了，实际上还不是，因为这个只是将es6的语法编译成es5（比如：可以将es6中的箭头函数编译替换成es5的写法），但实际上es6的新增的不仅仅是这些语法，还新增了许许多多的方法，数组上的，对象上的，这些原本不存在于es5中的方法是不能被babel-loader转换的，因此如果要转换这些方法，那么就需要安装新的loader

编译ES6方法

编译es6的方法的loader叫做babel-polyfill，它适合在项目中使用，本质上它会生成一个全局对象，在这个对象上挂载了所有es6中新增的方法，并且将es6的写法替换成了es5，在执行打包的适合，会将es6新增的方法替换成es5的写法

安装loader

cnpm install babel-polyfill -save-dev

配置使用

和babel-loader不同的是，babel-polyfill不需要在webpack.config.js的loader中进行配置，它有两种用法：
一种只需要在js文件中引入就可以正常使用了，比如

//app.js这个打包的入口文件中直接引入
import 'babel-pliyfill'

在打包的入口文件中直接通过import引入就可以正常使用了；
另外一种，是将入口文件的值的类型改成一个数组，第一项值填入babel-polyfill

module.exports = {
    entry:{
      	//将值改成数组，第一项值就是babel-polyfill
        app:['babel-polyfill','./app.js']
    },
    output:{
        filename:'bundle.js',
    },
    module:{},
    //它是一个数组
    plugins:[]
}

这两种配置的效果是完全一致的

编译语法糖

针对各种语法糖而言，编译的方式都和下例的typescript相似的，基本就是三步：

1. 安装对应的loader（比如vue-loader和jsx-loader）；
2. 在配置文件中写入对应的loader处理，写法都是固定的；
3. 根据loader规则写配置，具体哪里找配置规则，可以到loader的npm官网上或者github的官网上查找；

Typescript

ts是js的超集，也就是说ts中的的有些语法并不能在js中运行，浏览器仅仅是识别的是js的语法，对于ts是不认识的，因此如果编写了ts的代码，最终都是需要编译成js的；

安装loader

cnpm install typescript ts-loader --save-dev

配置loader

 module:{
    rules:[
        {
          //ts文件的后缀一共有两种，一种是.ts文件，一种是.tsx文件，因此都要考虑到
          test:/\.tsx?$/,
          use:{
              loader:'ts-loader'
          }
        }
    ]
},

编写配置文件

仅仅是在webpack.config.js中配置了ts的loader其实还是不能正常编译ts文件，还需要编写一个叫做tsconfig.jsons的配置文件：
同级目录下新建一个文件，命名为tsconfig.json（名字固定，不能改），既然是json文件，那必须使用json的语法写内容

{
    "compilerOptions": {
        "module": "commonjs",//遵循的模块规范
        "target": "es5" //最终编译成es5的语法
    },
    "exclude": ["./node_modules"] //写入不做处理的文件，也就是在进行编译的适合将这个文件夹排除
}

到这里，关于ts的配置才算是完成，等到打包的时候才可以正确的将ts的语法全部转成js的写法；

CSS的编译

webpack是以js文件作为入口文件打包的，想要打包css同样也是需要安装loader，css的loader一共两个：css-loader，style-loader，这个loader的使用顺序很重要，要先进过css-loader处理，再由style-loader处理；

为什么能将css打包，简单的说，流程就是在js中通过improt引入了css文件，之后打包js的时候会把css文件一起打包，当打包的js文件被在html中使用的时候，被打包的css文件会自动的以

安装

cnpm install style-loader css-loader --save

配置

module:{
    rules:[
        {
          test:/\.tsx?$/,
          use:{
              loader:'ts-loader'
          }
        },
        {
          //当遇到.css文件时，进行处理
          test:/\.css$/,
          //执行顺序是从后往前执行的，因此，先执行的css-loader需要写在后面
          use:[
              {
                  loader:'style-loader'
              },
              {
                  loader:'css-loader'
              }
          ]
        }
    ]
}

这里注意的是，loader的使用是从后往前的，也就是如果要先用css-loader处理那么css-loader必须写在后面

style-loader核心配置

• **insertAt：**style标签插入在哪一块区域；
• **insertInto：**style标签插入指定的dom；
• **singleton：**是否合并成一个style标签；
• **tarnsform：**在浏览器环境下，在style被插入到页面前的阶段，用js对css进行修改，也就是先对css样式进行了修改，然后再将其插入到页面上；

前三项的具体用法，如下例

{
    test:/\.css$/,
    //执行顺序是从后往前执行的，因此，先执行的css-loader需要写在后面
    use:[
        {
            loader:'style-loader',
            options:{
              //top：将style标签插入在header标签里的最上面，
              //bottom：将style标签插入header标签的最下面
              insertAt:'top', 
              //值也可以是一个对象
              //insertAt:{
              //  before:"#dom"  //将style标签插入指定元素的前面，这种很少用  
              //}
              // insertInto:'#dom' //将style标签插入指定元素的里面
              singleton:true //将所有style合并成一个
            }
        },
        {
            loader:'css-loader'
        }
    ]
}

transform，值是一个字符串，代表用哪个文件来对css样式进行修改，比如

{
  test:/\.css$/,
  //执行顺序是从后往前执行的，因此，先执行的css-loader需要写在后面
  use:[
      {
          loader:'style-loader',
          options:{
            //top:将style标签插入在header标签里的最上面
            insertAt:'top', 
            //是否合并style文件
            singleton:true, 
            //值是一个字符串，指定一个文件对样式进行修改，值是文件的路径
            transform:'./transform.js' 
          }
      },
      {
          loader:'css-loader'
      }
  ]
}

在tarnsform.js中

module.exports = function (css) {
    if(window.screen.width<500){
        css = css.replace('red','yellow')
    }
    return css
}

webpack会将css文件中的所有样式转成字符串传入，也就是说参数css就是在css文件中所有的css样式

css-loader

• minimize：是否压缩css（在webpack4中移除了）
• **module：**是否使用css模块化
• alias：css中的全局别名（在webpack4中移除了）

{
    test:/\.css$/,
    //执行顺序是从后往前执行的，因此，先执行的css-loader需要写在后面
    use:[
        {
            loader:'style-loader',
            options:{
             		//top:将style标签插入在header标签里的最上面，
              	//bottom：将style标签插入header标签的最下面
                insertAt:'top', 
                //insertAt:{
                //  before:"#dom"  //将style标签插入指定元素的前面，这种很少用  
                //}
                // insertInto:'#dom' //将style标签插入指定元素的里面
                singleton:true, //是否合并style文件
                transform:'./transform.js' //值是一个字符串，指定一个文件对样式进行修改
            }
        },
        {
            loader:'css-loader',
            options:{
                //使用css模块化
                module:{
                    //类名的命名规则：路径名，文件名，本来的名字，哈希值的前4位
                    //在webpack4中属性localIndentName写在module
                  	//在webpack3中则是与属性module并列
                    localIdentName:"[path][name]_[local]_[hash:4]"
                }
            }
        }
    ]
}

less，sass预处理语言

css的预处理语言是越来越流行了，和ts一样，less和sass并不难直接被浏览器识别，需要经过编译，转成css语言才可以被浏览器识别

安装

编译less的loader：less和less-loader

cnpm install less less-loader --save

编译sass的loader：sass-loader和node-sass

cnpm install sass-loader node-sass --save

配置使用

{
    test:/\.less$/,
    use:[
        {
            loader:'style-loader',
            options:{
              	//top:将style标签插入在header标签里的最上面
              	//bottom：将style标签插入header标签的最下面
                insertAt:'top', 
                singleton:true, //是否合并style文件
                transform:'./transform.js' //值是一个字符串，指定一个文件对样式进行修改
            }
        },
        {
            loader:'css-loader',
            options:{
                module:{
                    localIdentName:"[path][name]_[local]_[hash:4]"
                }
            }
        },
        {
            loader:'less-loader'
        }
    ]
}

less-loader必须写在最下面，因为use数组中的内容是从最后往前使用的，如果先是css-loader或者其他，那么是不会识别.less文件的，所以必须先将less文件转成css文件，再对css文件进行进一步的编译；

提取css代码成独立文件

上面说的方法都是将css代码以style的方式插入html，那么如何提取css代码为单独的文件，不再是以style标签的形式插入，简单的说，分为三步：

1. 安装插件，插件为：extract-text-webpack-plugin
2. 改造loader处的写法，把use改为使用extarct-text-webpack-plugin
3. 在plugin处添加，把extract-text-webpack-plugin加入到plugin里

安装

webpack3

cnpm extarct-text-webpack-plugin webpack --save

webpack4

cnpm extarct-text-webpack-plugin@next webpack --save

值的注意的是：插件extract-text-webpack-plugin是依赖与局部的webpack，因此，需要在局部安装一个webapck，否则会报错;
**

改造

//在webpack.config.js中引入刚刚安装的插件
var extarctTextCss = require('extact-text-webpack-plugin')

//改造loader中use的使用
{
  test:/\.less$/,
  //之前这里的user后面的值是一个数组，现在改用引入插件的extarct()的方法
  //这个方法接受一个对象为参数，对象有两个值
  //fallback，值是一个对象，对应style-loader
  //use，值是一个数组，对应css-loader和less-loader
  use:extarctTextCss.extract({
      fallback:{
          loader:'style-loader',
          options:{
              insertAt:'top', //top:将style标签插入在header标签里的最上面
              singleton:true, //是否合并style文件
              transform:'./transform.js' //值是一个字符串，指定一个文件对样式进行修改
          }
      },
      use:[
          {
              loader:'css-loader',
              options:{
                  module:{
                      localIdentName:"[path][name]_[local]_[hash:4]"
                  }
              }
          },
          {
              loader:'less-loader'
          }
      ]
  })
}

注册

这是一个插件，那么必须要在plugins属性中注册

//它是一个数组
plugins:[
    new extarctTextCss({
        //打包后的文件名，命名规则是：文件名+min.css，
        filename:'[name].min.css'
    })
]

之后，在html文件中通过link将打包后的css引入就可以使用了，打包后css文件拥有，体积将明显变小等等诸多优点；

postcss

postcss也是一个loader，这个loader比较不一样，它自身不带任何功能，但是可以把它理解成一个平台，这个平台上承载了许许多多的规则插件，比如：自动补全-moz-，-webkit-等前缀，使得css样式兼容各个浏览器等等

安装

cnpm install postcss postcss-loader autoprefixer postcss-cssnext --save

这里一个安装了4个模块，分别是：postcss，postcss-loader，autoprefixer，postcss-cssnext，前两个是postcss的必须项，后面两个是其平台上的插件；

• autoprefixer：postcss的一个插件，作用是前缀补全，因为不同的浏览器兼容性的问题，一些需要加-moz-，一些要加-webkit-，很繁琐，因此通过autoprefix插件可以自动补全前缀；
• postcss-cssnext：使用下个版本的css语法，语法见cssnext (css4)语法；

配置loader

{
    test:/\.less$/,
    use:extarctTextCss.extract({
        fallback:{
            loader:'style-loader',
            options:{
                //top:将style标签插入在header标签里的最上面
              	//bottom：将style标签插入header标签的最下面
                insertAt:'top', 
                singleton:true, //是否合并style文件
                transform:'./transform.js' //值是一个字符串，指定一个文件对样式进行修改
            }
        },
        use:[
            {
                loader:'css-loader',
                options:{
                    module:{
                        localIdentName:"[path][name]_[local]_[hash:4]"
                    }
                }
            },
            {
                loader:'postcss-loader',
                //定义关于postcss的配置
                options:{
                    //定义接下来的插件是给谁使用的，是给postcss使用的
                    ident:'postcss',
                    //插件集合
                    plugins:[
                        //通过require引入，并调用，这边和其他有点区别，是需要调用的
                        //假如不传参数，那么因为autoprefixer不知道要以哪个版本为对象进行转译，所以不会做处理，因此需要指定版本
                        //接受一个对象为参数
                        require('autoprefixer')({
                            //webpack4之后，需要传入override，因此需要在Browerslist前面加上
                            'overrideBrowserslist':[
                                //市场份额大于1%，并且版本为css2
                                ">1%","last 2 versions"
                            ]
                        }),
                        //引入cssnext语法，并调用
                        //引入之后变可以使用下一代css也就是css4的语法了
                        require('postcss-cssnext')()
                    ]
                }
            },
            {
                loader:'less-loader'
            }
        ]
    })
}

HTML的编译

webpack可以自动生成html，并把css代码和js代码插入html，要使用这个功能，需要安装一个插件（也就是plugin）这个插件就是：html-webpack-plugin；

安装

cnpm install html-webpack-plugin --save-dev

配置

引入插件

//在webpack.config.js中引入
var htmlWeboackPlugin = require('html-webpack-plugin');

注册插件

plugins:[
  // new webpack.DefinePlugin({'process.env':require('../config/dev.env')}),
  // //热更新的插件
  // new webpack.HotModuleReplacementPlugin(),
  new extarctTextCss({
      filename:'[name].min.css'
  }),
  //注册自动生成插件
  new htmlWeboackPlugin({
      //指定文件名
      filename:'',
      //指定html模版
      template:'./'
  })
]

注册完成后，就可以实现打包自动生成了，生成的html会把，打包的css文件和js文件自动引入html

配置插件

entry:{
    app:'./app.js',
    app2:'./app2.js'
},
//它是一个数组
plugins:[
    //注册插件
    new htmlWeboackPlugin({
      	//filename，打包后的文件名
        filename:'',
      	//打包的模版，打包的html不是凭空出现的，需要指定一个模版
        template:'./',
        //压缩，minify也是借助于第三方的工具进行压缩的，因此值是一个对象，用于配置
        minify:{
            collapseWhitespace:true
        },
        //false:不会自动将css和js的打包文件自动引入html，默认是ture，一般默认就可以了
        inject:true, 
        //多入口
        //假如入口文件里面有多个文件需要打包，而在最终的html里只需要一个引入，这里可以指定其中的哪一个被引入
        chunks:[
            'app'
        ]
    })
]

上例中的chunks指定了入口文件中的app，那么在生成的html中，只会将app对应的值的打包的文件引入，app2并不会引入；
当上面的打包成功之后，该webpack.config.js中的js文件，css文件会自动加入中；
具体举例，在vue中会有一个模版的文件，在这个文件中并没有引入我们后面写的代码，当执行打包的时候，为什么会把后面写的代码全部加载到这个文件上，就是因为打包的过程中webpack自动将css，js添加上去了；

其他

管理编译版本

在css的postcss这个loader以及babel-loader都有指定浏览器版本，那么可不可以提取出来呢，为了更方便管理？答案是可以的

方法一：package.json

//在package.json里加上
"browserslist":[
  ">1%","last 2 versions"
]

加上之后所有需要用到browserslist的地方都会指定值

方法二：.browserslistrc

新建一个文件，命名为：.browserslistrc，这个名字是固定的

browserslist":[
  ">1%","last 2 versions"
]

方法一比较推荐，写在package.json文件里

本文地址：https://blog.csdn.net/zy21131437/article/details/107522861

如对本文有疑问， 点击进行留言回复！！