Webpack 4.0 配置学习提升

一、Webpack是什么？

本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle（引自webpack官网）。

个人理解，在越来越工程化的现在，前端除了负责写界面和功能以外还需要合理管理前端所需的一些模块和资源，比如js压缩、css压缩、语法格式化、缓存、兼容性等等。但是不同行业和业务对前端要求都不一样，对代码编译、压缩、性能要求也不一致，所以需要我们针对不同项目搭配自己的工程，那么学习webpack也就很有必要了。

二、安装环境

Webpack的运行需要依赖Node.js，因此需要先安装Node.js，下载地址：Node.js

安装完成之后在命令行窗口输入下面两行命令，若有出现版本号则安装成功。

node -v
npm -v

执行npm init 初始化项目,完成后会生成package.json文件

npm init

为了提高安装速度，建议安装淘宝npm镜像

//通过以下代码即可完成cnpm 的安装
npm install -g cnpm --registry=https://registry.npm.taobao.org

//以下为webpack的安装方式
cnpm install -D webpack
cnpm install -D webpack-cli

在package.json同级目录下新建一个webpack.config.js的文件
- webpack.config.js为webpack的配置文件，根据配置执行
- 所有构建工具基于 node运行，模块化默认采用common.js

三、webpack详细配置

以下为完整配置

const { resolve } = require('path')
const HtmlWbbpackPlugin = require('html-webpack-plugin')
module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'build.js',
        path: resolve(__dirname,'build')
    },
    module:{
        rules:[
            {
                test:/\.css$/,
                use:[
                    //创建style标签，将样式放入界面
                    // 'style-loader',
                    //这个loader取代styleloader,提取js文件中的css成单独文件
                    MiniCssExtractPlugin.loader,
                    //将css文件整合到js文件中
                    'css-loader'
                ]
            }
        ]
    },
    plugins:[
        new HtmlWbbpackPlugin({
            template: './src/index.html'
        })
    ],
    mode:'development',
    //开发服务器 devserver,自动编译，自动打开浏览器，自动刷新
    //特点，只会在内存中打包，不会有任何输出到本地
    //启动devserver 指令为webpack-dev-server
    devServer:{
        contentBase:resolve(__dirname,'build'),
        compress:true,
        port:3000,
        open:true,
        //开启HMR功能，修改配置后重启服务
        hot: true
    }
}

entry (入口起点(entry point)指示 webpack 应该使用哪个模块，来作为构建其内部依赖图的开始。进入入口起点后，webpack 会找出有哪些模块和库是入口起点 （直接和间接）依赖 的)：
entry 入口起点类型
- string ---> 单入口 './src/js/index.js 打包形成一个chunk,输出一个bundle文件
  - 以上图为例，打包后生成的为build.js
- array ---> 多入口 ,最终只会形成一个chunk，输出只有一个bundle文件
```
entry: [
    './src/add.js',
    './src/index.js',
],
```
- object ---> 有几个入口文件就会形成几个chunk,输出几个bundle文件，此时，chunkname为key，适用于多页面程序，分别打包自己的js和html
```
entry: {
    add:'./src/add.js',
    index:'./src/index.js',
},
```
output:
```
output: {
    filename: '[name].js',
    path: resolve(__dirname,'build'),
    publicPath:'/' ,
    chunkFilename: '[name]_chunk.js',
    library:'[name]', 
    libraryTarget:'window',
},
```
- filename 输出的文件名
- path 输出路径,_dirname代表当前文件目录的绝对路径，resolve用来拼接绝对路径的方法
- publicPath 所有资源引入的公共路径
- chunkFilename 非入口的chunkjs
- library 全局整个库向外暴漏的变量名字
- libraryTarget 变量名字添加到那个属性下 window在browser，global为node

loader webpack本身只能识别js和json类文件，需要借助一些工具来对模块的源代码进行转换,可以将文件从不同的语言（如 TypeScript）转换为 JavaScript，或将内联图像转换为 data URL，loader就像一个翻译人员，能够将原文件经过转换输出新的结果，并且一个文件还可以链式的经过多个文件进行转换。所以，loader功能就是转换，其本质就是一个函数:

识别不同种类文件需要安装对应的loader

//加载css文件需要安装css-loader
npm install --save-dev css-loader
//加载TypeScript 将其转为js
npm install --save-dev ts-loader

使用方式

//详细配置
module : {
    rules : [
        //详细的loader配置
        {
            //test代表匹配哪些文件
            test: /\.css$/,
            //使用哪些loader，执行顺序为从右到左
            use: [
                //创建style标签，将js中的样式资源插入进行，添加到head中生效
                'style-loader',
                //将css文件变成common.js模块加载到我们的js中
                'css-loader',
            ]
        },
        {
            //test代表匹配哪些文件
            test: /\.less$/,
            //使用哪些loader，执行顺序为从右到左
            use: [
                'style-loader',
                'css-loader',
                'less-loader',
            ]
        }
    ]
},

plugin 解决 loader 无法实现的其他功能,plugin就是用来增强webpack的功能的。webpack通过plugin机制可以让其更灵活，来适应不同的开发场景。plugin的本质是一个类，可以在webpack的生命周期中被多次的调用:
```
   ```
 const { resolve } = require('path')
 const HtmlWbbpackPlugin = require('html-webpack-plugin')
 module.exports = {
     entry: './src/index.js',
     output: {
         filename: 'build.js',
         path: resolve(__dirname,'build')
     },
     module:{
         rules:[
         ]
     },
     plugins:[
         new HtmlWbbpackPlugin({
             template: './src/index.html'
         })
     ],
     mode:'development'
 }
 ```
```
- html-webpack-plugin 会默认创建一个html文件，并引入打包输出所有的资源
- 使用方式先 cnpm install html-webpack-plugin 安装，然后再 const HtmlWbbpackPlugin = require('html-webpack-plugin') 引入，最后在plugin类里new出来，plugin本质是个类，所以一定要new出来
mode:
- 设置为development输出后的代码不会被压缩
- 设置为production输出后的代码会被压缩，难以阅读

Webpack4.0 配置学习提升