简单了解webpack项目构建工具并初步使用

来源：互联网发布：原油eia数据最新消息编辑：程序博客网时间：2024/06/04 01:25

MarkDownPad练习开始

好了，写点笔记。希望同样是菜鸟的同学，能有一点菜鸟的共鸣~懂得更多的砖头们，快些批评侄指正吧。。。。在此之前，网上有很多教程，首先找一个看看人家配置完成后的文件。有个印象。
webpack:项目构建工具，从开发环境的构建，到项目上线，全过程操作各模块（很多很多），简化和很大效率的提升开发者的开发过程。简化了操作步骤。

更多关于webpack工具的了解，请度娘官网，反正你知道这真的很强大。如果你已经知道了干什么用的，也知道它是那么强大，急需了解构建过程，请看下面。

1.安装webpack

直接了当：npm install webpack -g，建议全局安装，避免不必要的一些麻烦。

2.准备项目环境

首先，在项目文件夹中创建文件夹，app（自己命名），和public,我的了解，app是存放本地的文件数据，以及后面将要书写的js模块的，而public文件夹中存放的是要提交的数据文件。比如后面会打包好bundle.js 文件，是在这个文件夹目录下。

然后在app中创建两个js文件。一个main.js文件（主要的文件，入口文件），和一个Gretter.js文件（顾名思义。greeter是迎宾员的意思，这就是页面开始的页面开始的一个问候信息。也可以是自己写的模块，引入到main.js中）。再在public中创建一个index.html文件。这个文件也是要上传到浏览器的，因为你要查看你的项目的额显示，这应该就是一个模板了。

greeter.js中，向外暴露出一个方法。使用modele.exports={}的形式。然后就可以在main.js中通过var greeter=require("greet")引入了。

        module.exports={         function(){         var greet=document.createElement("div");         greet.textContext="start a webpack project";         return greet         }        }

在本项目中安装webpack依赖包，后面会讲到，要打包文件的话，需要webpack依赖包进打包文件。所以需要本地安装webpack。然后你会看到你个module_nodles的文件夹出现了。
这个时候你就可以进行打包了。使用webpack /app/main.js /public/bundle.js;就完成了以第一次的简单打包。

3.打包

了解上面说的这种打方式就可以了，但这样打包每次都要输入入口和output的文件地址文件名。很麻烦而且容易出错。所以就需要我们看到的package.json文件和webpack.config.js文件了。

首先讲packages.json，就是一个包依赖的管理文件（我的理解），我们在里面进行配置，就可以进行相应的打包方法了。（还有一点，我们在github上下载项目是。项目中是不会有module_nodles文件夹的，因为里面东西太多了，太大了。这时候我们就需要package.json了，直接命令行npm install就可以逐条安装配置文件package.json 中的那些依赖项了。）

在script项中。添加start:"webpack";依赖会自动根据你的webpack全局环境生成；这样我们就直接可以输入npm start来进行打包了。不需要输入文件名了。

再说webpack.config.js文件，看过配置文件的。都知道有个entry和output项目，这两个就是打包的入口和输出文件。具体的书写格式，理解加记忆：

module.exports={    entry:__diename+"./app/main.js",    output:{    path:__dirname+"./public",    filename:"bundle.js"    }}

这样就配置好了入口和出口的文件及地址。现在就可以直接使用命令：webpack进行打包了。

4.调试配置

我自己还没有试验调试配置，据我学习了解，调试配置是为了在打包过程中，出现错误后，生成一个debug的文件，让我们很清晰地了解出现的错误。

5.服务器创建

当我们的文件打包好了，需要在服务器上运行起来。因为在服务器上运行起来，能模拟真实的环境。避免再项目上线后出现问题。一些公司都是有自己的测试服务器的。直接把地址配置成你的测试服务器，就可以直接查看运行结果了。

webpack服务器，需要本地安装，npm install –save-dev webpack-dev-server就可以安装成功。这样你就可以在webpack.config.js中进行配置了。我看到别人是这样的：

`"dev-server":"dev-server local.xxxx.cc  --port:3333"`;

这样完成配置，在命令行中，直接npm run dev-server，既可以将服务器跑起来，你的项目就可以运行在服务器上了。

创建完成服务器之后，要在webpack的配置文件中进行配置，

   dev-server:{       contentBase:"./publid"    //需要加载的文件       color:true，    // 命令行中输出的信息颜色       tistoryFallback:true    //是否跳转       inline:true    //是否实时更新。   }

6.接下来就是loader了

关于loader，首先你知道这是非常强大的，你可以将其理解为解译模块，因为他也是在module中进行配置的。比如页面使用的额sass.less.ES6语法还有react的JSX语法等等，在现在的浏览器环境下是不能解析的，所以需要进行解译。那就需要这些模块来完成响应的功能。

记住，loader需要本地安装，比图style-loader css-loader等等，都需要npm install的方式安装。然后再配置文件中进行配置。方法自己看别人的配置文件就能明白了。

loader的配置是在moudle中,在webpack.config.js中添加module,loader是以数组的形式存在的:

module:{    loaders:[    test:/\.json$/,    loader:"json"，      ]   }

其中test是正则验证，文件后缀为.json的文件。loader是loader的名称，这里是jsonloader。