webpack （JavaScript 打包器） 基本语法 ！

什么是webpack?

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

参考官网：https://www.webpackjs.com/concepts/

webpack的四大核心概念  

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

module.exports = {
  entry:  //入口路径
};

const path = require('path');

module.exports = {
  entry: './path/to/my/entry/file.js',
  output: {
    path: path.resolve(__dirname, 'dist'),  //输出到dest文件夹下
    filename:"[name].js"  //默认文件名
name  后加-[hash:1] 加上：随机生成长度为1的文件名  为了解决浏览器缓存问题

  }

};

 mode：development 开发环境  production 生产环境

loader 是打包除了js 以外的文件 可看官网 查询相关loader

 

总结

webpack是收把项目当作一个整体，通过一个给定的的主文件，webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包成一个或多个浏览器可识别的js文件

entry

entry: 用来写入口文件，它将是整个依赖关系的根 当我们需要多个入口文件的时候，可以把entry写成一个对象

output

output: 即使入口文件有多个，但是只有一个输出配置

Loader

loader的作用：
1、实现对不同格式的文件的处理，比如说将scss转换为css，或者typescript转化为js
2、转换这些文件，从而使其能够被添加到依赖图中
loader是webpack最重要的部分之一，通过使用不同的Loader，我们能够调用外部的脚本或者工具，实现对不同格式文件的处理，loader需要在webpack.config.js里边单独用module进行配置，配置如下：

  var baseConfig = {
            // ...
            module: {
                rules: [
                    {
                        test: /*匹配文件后缀名的正则*/,
                        use: [
                            loader: /*loader名字*/,
                            query: /*额外配置*/
                        ]
                    }
                ]
            }

要是loader工作，我们需要一个正则表达式来标识我们要修改的文件，然后有一个数组表示
我们表示我们即将使用的Loader,当然我们需要的loader需要通过npm 进行安装。例如我们需要解析less的文件，那么webpack.config.js的配置如下：

1、创建webpack.config.js

babel-loader： 让下一代的js文件转换成现代浏览器能够支持的JS文件  ES6 可转ES5  创建.babelrc文件 写入 “presets”：["@babel/preset-env"]

css-loader,style-loader :两个配合使用，用来解析css文件

url-loader file-loader 

const path = require("path")
const webpack = require("webpack")
const webhtml = require("html-webpack-plugin")
const webcss = require("extract-text-webpack-plugin")
module.exports = {
    entry: './src/js/index.js', //例如 入口文件路径
    output: {
        path: path.join(__dirname, "dest"),  //出口文件配置绝对路径
        filename: "js/[name].js"
    },
    module: {
        rules: [{
                test: /.css$/,
                use: webcss.extract({
                        fallback: "style-loader",
                        use: "css-loader"
                    }) //完成css的解析
            },
            {
                test: /.js$/,
                use: {
                    loader: "babel-loader",
                    options: {
                        presets: ["@babel/preset-env"]
                    }
                } //完成js的解析
            }, {
                test: /.gif$/,
                use: {
                    loader: "url-loader",
                    //完成图片的解析（10分）

                }
            },
            {
                test: /.(eot|svg|ttf|woff|log)$/,
                loader: "url-loader"
                    //完成适量字体图标的解析
            },
            {
                test: "/.html$/",
                use: [{
                        loader: "html-loader",
                        options: {
                            minimize: true
                        }
                    }] //完成 html的解析
            }
        ]
    },
    plugins: [
        new webhtml({
            filename: "./index.html",
            template: "./index.html"
        }),
        new webcss("style.css")

        //   new webpack.HotModuleReplacementPlugin()
    ],
    devServer: {
        //通过webpack-dev-server启动服务完成页面接口开发
        // hot: true,
        port: 9090,
        before(app) {
            app.get("/list", (req, res) => {
                res.end("1111")  
            })
        }
    },


}