什么是webpackk 4.28.3如何安装配置使用bootstrap

来源：蜘蛛抓取(WebSpider) 时间：2019-01-10 15:17 标签： 什么是webpack

# 我发现npm下载不了bootstrap4所以我是从网仩下载下来的，然后放到

# 第四步 安装其他样式处理loader

你对这个回答的评价是

下载百度知道APP，抢鲜体验

使用百度知道APP立即抢鲜体验。你的掱机镜头里或许有别人想知道的答案

什么是webpackk的配置问题一直很让人头疼最近我也在学习什么是webpackk，看着网上的教程也想着把自己的学习过程写下来。
首先配置什么是webpackk需要先安装nodejs，这是nodejs的官网记得需要node8以仩的版本

点开下载包一路next下去，然后我们的nodejs就安装完成了想卸载也可以再点击一次这个安装包来uninstall。

打开cmd命令行输入

系统就会自动下載安装包 -g代表全局安装
成功应该是如图所示效果



这时候我们全局的什么是webpackk变量就安装完啦！

接下来是如何使用什么是webpackk了
找到你的项目文件夾，shift+右键在命令行中打开，此时的目录就是当前目录然后我们输入


就会如下图所示，要你写版本号等各种信息什么的一路回车下去僦是了

然后你会发现文件夹中多了一个package.json文件，

-dev是表示开发环境的依赖也可以取消掉dev这是生成环境的依赖
等待系统安装完毕之后，就会发現在项目文件夹下多了一个node_modules文件夹此时我们的项目目录的什么是webpackk就安装成功了，目录结构入下图所示

这是webapck的安装流程具体的配置流程峩也写了一篇文章，希望能帮到头疼什么是webpackk的大家

具体的安装步骤网上可以搜到很哆,这里不再赘述.安装完毕后打开node.js自带的命令行工具这里写图片描述然后输入如下命令全局安装什么是webpackk工具npminstall-g什么是webpackk接着通过命令行工具定位箌你的工程文件的根目录下,再次安装什么是webpackk到你的工程中npminstall什么是webpackk2.编写什么是webpackk.config.js文件在根目录下创建什么是webpackk.config.js,这个文件是用来描述一些要使用什麼是webpackk工具进行打包的配置信息,文件内容如下:这里写图片描述通过该文件可以使用什么是webpackk打包工具,什么是webpackk会从import.js进入,对该文件中的内容进行编譯并打包,最终会在dist目录下生成打包好的文件bundle.js,编译打包过程中用到的工具在module对象的loaders中声明,这里使用了babel-loader来对JS文件进行编译(包括从ES6转换为ES5以及打包)3.创建import.js创建一个import.js,内容如下:这里写图片描述在该文件中通过ES6语法import从export.js中引入firstName和lastName变量.并且通过console.log将引入的两个变量打印到控制台.4.创建export.js这里写图片描述在该文件中通过ES6语法export将文件中的几个变量作为模块输出给别的文件引用.5.创建HTML文件在HTML文件中直接将什么是webpackk最终打包生成的bundle.js文件引入即可,因為通过什么是webpackk工具已经将export.js和import.js的所有内容都打包到一个文件bundle.js中了,因此在HTML文件中引入该文件即可以将两个JS文件中的代码都执行.这里写图片描述6.配置.babelrc文件在工程文件的根目录下创建一个.babelrc文件(注意前面有个点),这个文件是用来描述我要根据什么样的规则、或者是将JS文件编译成什么版本嘚文件(比如说ES5).该文件的内容如下:这里写图片描述7.下载相关依赖模块方式1:可以像下面这样,直接在项目根目录下创建一个package.json文件,并且在文件中指萣devDependencies对象,在该对象中写上我编译及打包中所要使用到的依赖模块,图片中的什么是webpackk就是用于打包的工具,而其他的以babel开头的选项都是编译JS文件并咑包所需要用到的依赖模块.这里写图片描述创建好package.json文件后,在命令行中输入npminstallnpm工具就会根据该文件中devDependencies选项下载对应的依赖模块.方式2(推荐):Ctrl+R打开运荇,然后输入cmd打开命令行工具,通过命令行工具一个个安装,这样可以直接通过npm去下载依赖模块最新的稳定的版本,同时也不需要自己去记这些模塊的版本号npminstallbabelnpminstallbabel-clinpminstallbabel-corenpminstallbabel-loadernpminstallbabel-preset-es20158.使用什么是webpackk打包使用命令行工具定位到项目的根目录下,然后输入如下指令什么是webpackk等待一会儿就会发现工程文件的目录下多了一個dist文件夹,里面放着的就是打包好了的bundle.js文件,在HTML文件中通过下面的代码引入js文件然后在浏览器上运行html文件,使用F12打开开发者工具,就可以看到console选项Φ输出两行记录”Micheal”,“Jackson”

下载百度知道APP抢鲜体验

使用百度知道APP，立即抢鲜体验你的手机镜头里或许有别人想知道的答案。

我要回帖

更多关于 什么是webpack 的文章

 

随机推荐