webpack详解

一、什么是webpack？ 作用有哪些？

        webpack可以看做是模块打包机：它做的事情是，分析你的项目结构，找到javascript模块以及其它的一些不能直接运行的拓展语言（scss\TypeScript等），并将其转换和打包为合适的格式供浏览器使用；

        webpack的工作方式是：把你的项目当做一个整体，通过一个给定的入口文件（如：index.js），webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的javascript文件。

        

    其实webpack还具备其它强大的功能。比如：

            搭建服务器、语法检验、压缩、合并 ......

二、webpack与gulp的区别

        webpack和gulp没有什么可比性，gulp是一种能前端工程化的工具，而webpack是一种模块化的解决方案

        模块化：就是将复杂的程序细化为小的文件；

                    好处：（1）命名空间方面，解决了命名冲突问题

                               （2）复用性高

                               （3）方便查找对应模块

三、打包流程

        webpack是建立在module智商进行打包的

 

        css js img 都叫module模块

 

    

 

 

流程：

        （1）全局安装webpack

                cpm  install  webpack@3.5.3 -g

        （2）创建一个文件夹，先初始化项目

                npm init -y    

               作用：将当前的文件夹变成一个node的包

        （3）局部安装webpack

                cnpm install webpack@3.5.3  --save-dev

        （4）创建webpack.config.js配置文件

                创建src文件夹   ---开发阶段

                创建dis文件夹    ---部署阶段

        （5）做配置文件webpack.config.js

                <1>引入path模块

                        

                <2>定义出口文件路径和入口文件路径

                        

                        注：入口路径的文件引入其他所依赖的文件。

                                在index.html只需要引入打包好的app.js文件就可以了

                 <3>写webpack配置

                        配置入口文件：

                                

                        配置出口文件：

                                

                            注：这里面的name就是入口文件里面的key值，也就是app

                                    filename后面配置的是写入文件的名称

                                    path是配置到的地址

                   配置处理模块使用的一些loader  ----  转换不同语言

                                

    

                注：解析js文件：

                        test里写正则表达式，来选择要处理的文件类型；

                       use类似于配置项，里面配置loader,babel-loader---用来解析js的loader

                        如果遇到了浏览器不识别的语言，则需要配置options,里面配置presets，里面配置@babel/env用来转换es6代码， @babel/react用来转换react代码

 

                        解析css文件：

                        test里面写正则表达式，来处理css或scss文件

                        use来配置所需loader

            下载处理js所需的第三方包：

                cnpm install --save-dev @babel/core babel-loader @babel/preset-env @babel/preset-react

            下载处理css所需的第三方包：

            cnpm install --save-dev style-loader css-loader sass-loader node-sass

        

        插件：html-webpack- plugin   -----用来自动在dist之中创建html并在里面自动引入app.js文件

                cnpm install html-webpack-plugin --save-dev

 

                下载之后再webpack.config.js配置文件里面引入：

                

                 然后配置plugins:

                 

         注：filename 生成的文件名称

                template生成所用模版 ---- 这个要自己创建，在大文件夹下。

                title  在模版index.html文件中写    

                可以让以这个模版创建的html页面的title都初见配置项里title的内容。

                arr可以在模版里面进行逻辑操作：

 

            下载一个服务器插件 -- webpack-dev-server     用来同步刷新页面

            cnpm install webpack-dev-server@2 -g

            下载之后再package.json里面配置一个指令

            

               启动： npm run dev      修改代码浏览器页面同步更新。