webpack（静态模块打包工具）

一、含义：是一个现代化的JavaScript应用程序静态模块打包工具

二、作用：浏览器是不能识别vue、jsx等文件的，需要相应的插件来转化，而webpack可以用来是捏不是js或json的文件

三、webpack环境安装

        1.在小黑窗中进行全局安装：不指定版本,默认下载最新版本,全局安装以后直接使用

        2.创建项目文件，名字自取：

        3.进入刚刚创建的项目文件夹：

        4.生成项目配置文件package.json:

        5.手动创建一个webpack.config.js的打包配置文件。后面的配置都在这个文件夹中进行

四、webpack的构成：entry（入口）、output（输出）、loader（加载器）、plugins（插件）、mode（模式）：都在webpack.config.js中进行配置

        代码：module.exports={     
                             项目入口配置,
                             项目出口配置,
                             加载器配置,
                             插件配置,
                             开发模式配置,
                             其他        }

项目的构成：

                

1.entry：打包项目的入口文件配置，在配置文件中可以设置一个或多个入口文件，但一般只有一个入口

        （1）配置基础目录,然后配置单入口文件
                module.exports = {
                          context: __dirname+'/app', //当前文件所处目录下的app目录
                          entry:"./test.js"  //相对于context的路径 ，等价于__dirname+'/app/test.js
                                };

        (2)配置多入口：

                module.exports = {
                            context: __dirname + '/app', //配置基础目录，后面的entry中的都是基于这个路径来操作的
                            entry: {
                                a: './test.js',      //寻找当前目录下的app目录下的test.js文件并且输出时默认为a.js
                                b: './test2.js',     //输出时默认为b.js
                                test3: './test3.js'  //输出时默认为test3.js

                                c: { import: './test3.js', filename: 'pages/[name]111.js' }//输出时默认为pages文件夹下的c111.js
                                   d: { import: './test4.js', filename: 'pages/[name][hash]222.js' }     //输出时默认为pages文件夹下的d+哈希值+222.js   
    e: { import: './test5.js', filename: 'pages/[name][hash:3]333.js' }//输出时默认为pages文件夹下的e+3位哈希值+000.js
                                    }
                                                }

                注：[name]呆鸟entry的当前属性名字，[hash]是长度位20位的哈希值，若想要规定其位数[hash:位数]，如【hash：3】：规定哈市的位数位3位

2.output：用于指定构建后的文件输出的目录和文件的命名规则

        需要在入口配置完成的情况下进行出口配置

        

3.loader：使用规则是从右往左执行

        在前面两个都完成后在配置该加载器

        含义：因为webpack只能理解JavaScript和JSON文件，而loader可以让webpack去处理其他类型的为念，并将它们转换位有效的模块，功程序使用。

        常见的加载器有：

                css-loader:解析css文件

                style-loader：将css-loader生成的内容用style标签挂载到页面的head中

                file-loader：可以将视频、音频、图片等媒体编码的文件将其打包

                ts-loader：将TypeScript转换位JavaScript

                babel-loader：用于将新版本的JavaScript转换为向后兼容的JavaScript版本，便于在就的浏览器上运行（高代码转换为低代码）

                sass-loader：将sass代码转换为css代码

               项目代码结构：

                        

        （1）css-loader&style-loader：两者是结合使用的

                        （1：下载：npm install css-loader style-loader --save-dev

                        （2：配置：80行：若该文件为.css结尾的，那么就使用css-loader和style-loader加载器，先执行css-loader，再执行style-loader加载器

                main.js文件中的代码：

                        

                        

        （2）file-loader

                （1.下载：npm i file-loader --save-dev

                （2：配置：main.js文件

                        

                        

        （3）ts-loader：

                （1:下载：npm install ts-loader webpack typescript --save-dev

                （2：创建一个tsconfig.json文件用于配置ts编译需要的文件

                （3：main.js:

                        

                        

                (4)balbel-loader:

                       其中：option中的presets是babel的预设，定义了一组特定的插件组合，用于将最新的JavaScript语法转换为目标环境的配置自动确定需要的转换规则。

        （5）sass-loader：若目标文件是sass、scss则启用该加载器

                （1：下载：npm install sass-loader sass webpack --save-dev

                （2：配置：main.js: 

                                style.scss:

                                        

                                webpack.config.js:

        

4.plugin（插件）：loader用于转换某些类型的模块，而插件可以用于执行范围更广的任务（打包优化、资源管理、注入环境变量等）

        （1:查错工具插件：EslintWebpackPlugin：用于查找和修复JavaScript代码中的问题

        （2：环境准备：npm install eslint-webpack-plugin --save-dev

        （3：若未安装eslint版本大于7，则需要通过npm指令进行安装：npm install eslint --save-dev

        （4：插件配置：webpack.config.js文件

module.exports = {
    // 项目入口配置,
    // 项目出口配置,
    // 插件配置,
    // 其他,
    // 开发模式配置,
    //加载器配置loader,
    // 插件：
    plugins: [

        new HtmlWebpackPlugin({
            title: "插件", //html的标题默认为"Webpack App",
            filename: "插件.html", //模板html打包后生成的文件名,放在output.path里面,默认"index.html"
            template: __dirname + "/index.html", //模板html文件的路径,
            inject: "head", //'head' || 'body' 打包后的bundle挂载到模板html的位置:'body' 放置在body元素的底部。'head'将把脚本放在head元素中。,
            publicPath: "./", //设置script和link标签的公共路径
            // minify:true,//若都默认为true的话则可简单写为true或false
            minify: {
                collapseWhitespace: true, //是否压缩HTML:空格回车
                keepClosingSlash: true, //在单元素上保留末尾的斜杠
                removeComments: false, //是否清除HTML注释  
                removeRedundantAttributes: true,
                removeScriptTypeAttributes: true, //是否删除script的type属性(这个属性对于现代浏览器没啥用)
                removeStyleLinkTypeAttributes: true, //是否删除< style>和< link>的type="text/css"  
                minifyJS: false, //对js是否进行压缩，包括取出空格和换行、保留末尾斜杠、清除、注释等 ,
                minifyCSS: true //对css是否进行压缩，包括取出空格和换行、保留末尾斜杠、清除、注释等 ,
            },
            cache: true, //是否启用缓存，如果为true，则只有文件发生变化时才会重新打包

        })],


}

5.开发环境（devServer）：我们在开发项目时(development|dev), 常常需要一个本地服务器托管本地资源,比如你们用的vscode的右键open in server 的插件.我们可以在webpack集成的打包环境中配置本地服务器

        （1：安装：npm install --save-dev webpack webpack-dev-server webpack-cli

        （2：参数配置：webpack.config.js文件