项目打包 自动化构建工具（webpack gulp grunt ）

    webpack 只能识别js和json文件      

webpack 认为所有的东西都是模块

   四个核心概念：

        入口: 所有项目都需要一个入口文件  入口文件默认地址 是 /src目录下的 index.js

        出口：打包生成的产物需要有一个存放的位置 /dist

        loader :  处理除了 js 文件以外的文件 比如 图片 css    需要下载才能用 npm i css-loader style-loader --save     

　　　　　　　　另外一种方法 npm i mini-css extract-plugin（也是下载插件）

        插件 : 实现高级和复杂的功能

 

webpack 需要结合 webpack-cli 一起使用

安装：

            npm i webpack webpack-cli --save

        创建文件：  

            1. 在项目的根目录下创建一个 src文件夹，

            2. 在 该文件夹下 创建一个 index.js 文件

            3. index.js 里边的内容根据功能编写代码

        配置命令：

            在package.json 文件中 配置启动命令

                "scripts": {

                    "test": "echo \"Error: no test specified\" && exit 1",

                    "dev":"webpack",

                },

            执行命令时 npm  run dev 会提出警告

                WARNING in configuration

                The 'mode' option has not been set, webpack will fallback to 'production' for this value.

                Set 'mode' option to 'development' or 'production' to enable defaults for each environment.

                You can also set it to 'none' to disable any default behavior. Learn more: https://webpack.js.org/configuration/mode/

            因此配置时需要指定环境模式：

                "scripts": {

                    "test": "echo \"Error: no test specified\" && exit 1",

                    "dev":"webpack --mode development",  // 开发模式

                    "build":"webpack --mode production"  // 生产模式

                }

               

               

        webpack 支持 的模块化：

            ES2015 import 语句 ：  es6 的模块化导入和导出 ,   export / import

            CommonJS require() 语句 ：    exports / module.exports / require()

            AMD define 和 require 语句

            css/sass/less 文件中的 @import 语句。

            样式(url(...))或 HTML 文件(<img src=...>)中的图片链接(image url)