怎么在反应框架中引入webpack

这篇文章给大家分享的是有关怎么在反应框架中引入webpack的内容。小编觉得挺实用的,因此分享给大家做个参考。一起跟随小编过来看看吧。

在反应框架中引入webpack的方法:首先创建一个文件夹,然后创建一个“包。json”的工程文件,接着全局安装webpack;最后通过“npm安装”在项目中安装webpack即可。

<强>什么是webpack ?

webpack是一个模块打包工具,在前端中模块指的就是js, css,图片等类型文件.webpack支持多种模块系统,而且兼容js的多种书写规范(如ES6),它可以处理模块间的相互依赖关系,对静态资源进行统一打包和发布。

webpack的安装与使用

首先我们创立一个文件夹如研究中,在开始菜单打开cmd,进入该文件夹,然后进行以下步骤:

1, npm init//创建一个包。json的工程文件。

2, npm安装- g webpack//在全局安装webpack,若已安装过则可以跳过。

3, npm安装——save-dev webpack//在项目中安装webpack。

创建完成之后,我们在我们的文件目录中创建两个文件夹,为经销(打包后放置的文件夹)与src(我们写项目的地方).src文件夹中我们先创立两个文件为index.js与main.js.dist文件夹中我们创立一个索引。用html来让浏览器来读取显示。结构如下:

我们在dist/index . html中写好初始的内容,引入的js文件为包。js文件,这个文件就是webpack打包后生成的文件。如下图:

在索引。js中输入“导出代码”:

module.exports =,()函数,{ 　　var 才能;hello =, document.createElement (& # 39; div # 39;); 　　hello.textContext =,才能“却;能够is  index.js 文件!” 　　return 才能,你好; 　　}

将你好变量导出,在主要。js接受变量,然后将该变量插入到根标签中:

const  hello =,要求(& # 39;。/index.js& # 39;); 　　document.querySelector(& # 39; #根# 39;).appendChild (hello ());

接下来我们在根目录下创建一个webpack.config.js文件用来配置webpack,我们先进行简单的配置,目前主要做的是要设置内容的入口路径以及打包后文件的存放路径。在webpack.config。js中写入以下代码块:

module.exports =, { 　　,,条目:__dirname  +,“/src/main.js", 　　输出:{才能 　　,,,路径:,__dirname  +,“/dist", 　　,,,文件名:,“bundle.js" 　　,,}, 　　}

条目为唯一的入口文件,也就是webpack要从这里读取,输出为输出,这里设置的是输出到dist目录下的bundle.js文件,接着运行webpack在cmd中运行

“。\ \ node_modules \ \。bin \ \ webpack"这是在windows中运行的。若已安装全局则使用“webpack"也可以。

进一步我们不用以上的输入方式,在包中。json中的脚本中加入“时:“webpack",即可通过npm开始命令来启用webpack。

package.json中的脚本部分已经默认添加了。/node_modules/１韭肪?所以我们也不需要输入详细的路径地址了.start是一个特殊的脚本名称,我们也可以起其他的名字,但是如果对应的不是开始那么我们要启动时必须要使用npm运行{你在脚本中所用的名字}如npm运行构建。

webpack的在开发生产时的具体功能

开发时需要调试代码,在打包过后如果出错我们就需要调试工具来帮我们改正错误.Source地图就是帮我们解决这个难题的。他要在我们的webpack.config。js文件中进行配置,属性名为devtool,他有四种选项来让使用者来选择。

1,源映射:在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的来源地图,但是它会减慢打包文件的构建速度;

2, cheap-module-source-map:在一个单独的文件中生成一个不带列映射的地图,不带列映射提高项目构建速度,但是也使得浏览器开发者工具只能对应到具体的行,不能对应到具体的列(符号),会对调试造成不便;

3, eval-source-map:使用eval打包源文件模块,在同一个文件中生成干净的完整的来源地图。这个选项可以在不影响构建速度的前提下生成完整的sourcemap,但是对打包后输出的js文件的执行具有性能和安全的隐患。不过在开发阶段这是一个非常好的选项,但是在生产阶段一定不要用这个选项;

4, cheap-module-eval-source-map:这是在打包文件时最快的生成源图的方法,生成的源图会和打包后的JavaScript文件同行显示,没有列映射,和eval-source-map选项具有相似的缺点。

怎么在反应框架中引入webpack