五个概念：entry(入口），output(出口0) ，loader(处理非js文件) ，Plugin(插件) ，mode(模式)

安装：

npm init
npm i webpack webpack_cli -g(全局安装)
npm i webpack webpack_cli -D(本地安装)

简单指令

webpack ./(入口url) -o ./(出口url) --mode=development

基本代码

在src层级创建webpack.config.js

import resolve = require('path')(引用path中的path)

  import MiniCssExtractPlugin = require('mini-css-extract-plugin')

entry(入口):

    module.exports = {
      entry: './path/to/my/entry/file.js',
    };
    或者
    module.exports = {
      entry: {
        main: './path/to/my/entry/file.js',
      },
    };
    **我们也可以将一个文件路径数组传递给 `entry` 属性，这将创建一个所谓的  *"multi-main entry"* 。
    在你想要一次注入多个依赖文件，并且将它们的依赖关系绘制在一个 "chunk" 中时，这种方式就很有用。**
    module.exports = {
      entry: ['./src/file_1.js', './src/file_2.js'],
      output: {
        filename: 'bundle.js',
      },
    };
    **当你希望通过一个入口（例如一个库）为应用程序或工具快速设置 webpack 配置时，单一入口的语法方式是不错的选择。
    然而，使用这种语法方式来扩展或调整配置的灵活性不大。**
    入口方式[:](https://webpack.docschina.org/concepts/entry-points/)

output(出口)

    module.export = {
        output : {
            filename : filename.js,
            path : (reslove , dirname)
        }
    } 
    **如果有多个入口文件**
    module.export = {
        entry : {
            app : (url),
            search : (url)
        },
        output : {
            filename : [name].js,
            path : (reslove , dirname)
        }
    }
    高级见[:](https://webpack.docschina.org/concepts/output/#advanced)

loader(处理文件,自下向上,自右向左):

**例如，你可以使用 loader 告诉 webpack 加载 CSS 文件，或者将 TypeScript 转为 JavaScript。
为此，首先安装相对应的 loader:**
    npm i style-loader css-loader less-loader --save-dev / -D
    
    module.export = {
        module : {
            rules:[
                {
                    test : /\.css$/,
                    use : ['style-loader','css-loader',
                        {
                        //css处理兼容性 postcss --> postcss-loader postcss-preset-env
                        //帮postcss找到package.json中browserlist里面的配置，通过配置指定加载css兼容性样式
                            loader : 'postcss-loader',
                            options : {
                                ident : 'postcss',
                                plugins : () => {
                                    require('postcss-preset-env')()
                                }
                            }
                        }
                    ]
                },
                {
                    test : /\.less$/,
                    use : ['style-loader','css-loader','less-loader']
                }
            ]
        }
    }
    
    **处理图片：(url-loader依赖于file-loader)**
    {
        test : /\.(jpg|png|gif)$/,
        loader : url-loader,
        options : {
            //limit:发现超过8kb就会被base64处理，变成base64的字符串
            limit:8*1024
            //url-loader默认使用es6模块化，改成commonJS解析,不使用会使下面报错
            esModule : false
        }
    },
    {
        test : /\.html$/ (处理img 标签),
        loader : html-loader
    }
    **其他资源,不用更改直接引出**
    {
        exclude : /\.(...)$/,
        loader : file-loader,
        options : {
            //取名字前十位
            name : '[hash:10].[ext]'
        }
    }
详见[:](https://webpack.docschina.org/concepts/loaders/)

Plugin(插件)

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

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    filename: 'my-first-webpack.bundle.js',
    path: path.resolve(__dirname, 'dist'),
  },
  module: {
    rules: [
      {
        test: /.(js|jsx)$/,
        use: 'babel-loader',
      },
    ],
  },
  plugins: [
    new webpack.ProgressPlugin(),
    new HtmlWebpackPlugin({ template: './src/index.html' }),
    //替代style-loader ， 变为~.loader
    new MiniCssExtractPlugin({ filename : 'css/bulit.css' })
  ],
};
详见[:](https://webpack.docschina.org/concepts/plugins/)

热更新(dev-server)

自动打开客户端，刷新，用来自动化服务器 ，只会在内存中编译打包，不会输出
module.export = {
    ...,
    devServer : {
        //项目路径
        contentBase: reslove(__dirname , dirname),
        //使用gzip压缩
        compress : true,
        //端口
        port : 3000,
        //自动打开
        open : true
    }
}
详见[:](https://webpack.docschina.org/concepts/hot-module-replacement/)

基础模板形状

module.export = {
    entry : {
        ...
    },
    output : {
        ...
    },
    module : {
        rules : [
            {
                test : /\.()$/,
                user:[]或者loader:(...)
            }
        ]
    },
    plugins:{
        new ...(),
        new ...()
    }
    mode : development(更大) / production(更小),
    devServer : {
        contentBase: reslove(__dirname , dirname),
        compress : true / false,
        port : 3000 / ....
        open : true / false
    }
}

//在package.json中配置
注："browserlist" : {
        //设置环境变量node：process.env.NODE_ENV = 'development' 加载module.export前
        "development" : [
            "last 1 chrome version"
        ],
        production : [
            ">0.2%",
            "not dead",
            "not op_mini all"
        ]
    }