webpack入门学习1（环境搭建、entry、output、webpack-dev-server配置）

webpack是什么？

       webpack是一个Javacript应用程序得静态模块打包器

 

webpack有什么作用?

        1.模块化打包

                 webpack会将项目的资源文件当成一个一个模块，模块之间会有依赖关系，webpack将会对这些有依赖关系的文件进行处理，让浏览器能够识别，最后将应用程序需要的每个模块打包成一个或者多个bundle。

 

Webpack环境配置和简单打包

       1.安装node

                node官网地址:  https://nodejs.org/zh-cn/

       2.模拟创建一个基本的项目

               例如在百度这个页面按下ctrl+s保存，然后把html文件拖到一个空的文件夹下

               

       3.创建package.json文件

               使用cmd命令行进入到项目所在的目录下，输入命令：npm init 。然后一直按enter键。按安装完成后项目的目录下会多一个package.json的文件 

      4.安装webpack

               命令行中输入 ： npm install --save-dev webpack-cli

       5.打包

              打包有两种模式：webpack --mode development、webpack --mode production。第一种是用于开发环境中，而第二种是用于生产环境中。它们的区别在于第二种的打包方式会将代码文件压缩，会把所有的空格、换行、缩进都消去。

               因为打包默认entry入口 src/index.js，默认output出口 dist/main.js。

               因此首先创建一个src的文件夹，然后再在里面创建一个index.js文件，随便输入一行代码。例如console.log(1+1)

              然后在package.json文件下添加scripts

                    最好设置好后在命令行程序中运行npm run dev或者npm run build来进行打包。

                  运行完成后会在项目目录下多出一个dist文件夹，里面的main.js就是打包后的js文件。

 

配置webpack.config.js

         沿用上面的项目文件，先把src和dist的文件夹删除。然后创建一个public文件夹，里面有个index.js文件。然后：

         1.新建一个webpack.config.js

         2.配置入口entry(所需打包的文件路径) 

         3.配置出口output

 

                   （1）path指文件打包后的存放路径

                   （2）path.resolve()方法将路径或路径片段的序列处理成绝对路径

                   （3）__dirname 表示当前文件所在的目录的绝对路径

                   （4）filename是打包后文件的名称

         4.在命令行中执行 npm run dev

               此时就会创建有个build文件夹，里面就是打包后的文件

 

入口entry和出口output进阶用法

        1.入口entry

                1.1单入口

                      单文件：

                               例如：  entry：‘./src/index.js’

                      多文件：

                                在你想要多个依赖文件一起注入，并且将它们的依赖导向到一个“chunk”时，传入数组的方式就很有用。

 

                                 例如：

 

         

                  1.2多入口

                                 例如：

        2.出口output

                2.1单出口

                       例如：  

                2.2多出口

                         例如：

                   [name] 原文件的名字

   注意：多入口要配合多出口使用

         多入口、多出口示例：

命令行运行 npm run dev后，build文件夹下多出两个文件

 

配置webpack-dev-server

      什么是webpack-dev-server？

               webpack-dev-server是webpack官方提供的一个小型Express服务器。使用它可以为webpack打包生成的资源文件提供web服务。

      webpack-dev-server 主要提供两个功能：

              1.为静态文件提供服务

              2.自动刷新和热替换(HMR)

      1.安装： webpack-dev-server

             命令行输入：npm install --save-dev webpack-dev-server

      2.配置webpack.config.js文件

             

      3.配置package.json

             "scripts": {

                   "start": "webpack-dev-server --mode development"

               }

       4.在build文件夹下新建index.html文件，在html中引入main.js

        5.在命令行程序运行npm run start

             然后会自动弹出网页，查看控制台输出：