如何使用webpack打包文件.

发布网友发布时间：2024-09-26 16:39

共1个回答

热心网友时间：2024-11-16 01:04

highlight:a11y-darkwebpack1.什么是webpack有什么用.webpack是一个现代Javascript应用程序的静态模块打包器.????静态:文件资源????模块:node环境,引入文件,遵守模块化语法.还可以翻译和压缩代码.减小代码包体积,让浏览器更快速的打开网页2.学习webpack的准备工作2.1准备.???环境准备：它是基于nodejs，所以本机一定要先安装了node。???项目准备：webpack是用来对已有项目进行**打包**，所以一定是在某个项目下进行应用打包。???知识准备：模块化（es6,?commonjs模块化均可）2.2操作顺序.????1.??安装node????2.??用npm?init?初始化项目(如果已经有package.json，则跳过这一步)????3.??在当前项目中安装并使用webpack3.项目初始化

任意创建一个空文件夹,在这里我们取名字为,demo,进入到文件夹内部,打开cmd.用npminit-y命令来生成一个package.json

4.准备初始代码.

创建三个文件,index.html.index.js,tool.js然后搭建项目结构.

项目名├──?index.html├──?index.js├──?tool.js└──?package.json

在index.html中写下如下代码.

<!DOCTYPE?html><html?lang="zh"><head>????<meta?charset="UTF-8">????<title>index</title>??</head>??<body>????<div?id="app">????</div>????????<script?src="./tool.js"></script>????<script?src="./index.js"></script></body></html>

tool.js代码

const?updateDom?=?(id,?content)?=>{????window.document.getElementById(id).innerHTML?=??content}

index.js

updateDom?('app','index.html')

说明:

在一个html中引入多个js文件，并且要注意它们的顺序关系。

script代码在body的底部，这样可以确保是dom节点渲染在js代码执行之前。上面的代码中有如下问题：

js文件之间有先后的引用的关系：由于index.js中引用了tool.js的，所以必须要把tool.js放在index.js的前面。

存在变量污染的情况：一个文件中定义的变量，在另一个文件中可能会被修改，覆盖。

随着.js文件个数增加，则项目会越来越不好管理解决思路:模块化+webpack打包.

接下来到我们的重头戏.安装并使用webpack.

安装webpack

webpack是一个工具，对于所有的项目都可以来使用，从这个意义上来讲，它是可以去全局安装的，但是，考虑到不同的项目中可能使用了不同的webpack版本，所以不推荐大家去全局安装。特别是打开一个老项目时，一定要注意一下它的webpack的版本号。

打开cmd窗口安装,输入下面这串命令:npmiwebpackwebpack-cli-D

下面通过命令行工具来检测是否安装成功.

#?方式一：node_moles\.bin\webpack?-v#?方式二：npx?webpack?-v

注意:

由于webpack并不是全局安装的，所以并不能直接使用webpack-v来做检验。

npx是npm5.2之后提供的新功能。可以通过npx-v来检测它的版本。在这里，我们通过它来调用项目安装的模块，它在运行时会在node_moles/.bin中去检查命令是否存在。

在tool.js导出模块.

更改之后的代码.export?const?updateDom?=?(id,?content)?=>?{??window.document.getElementById(id).innerHTML?=?content}

在index.js导入模块.

更改之后的代码import?{?updateDom?}?from?"./tool.js"updateDom('app',?'index.html')

由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错.

我们接下来就需要使用webpack命令来对index.js进行处理了.

使用webpack来做打包.

命令是:npxwebpack?文件名

我们只需要在小黑窗输入,npxwebpack./index.js?因为我们的文件名字叫index.js你也可以根据你的文件名来输入这行命令.

这时会自动生成一个dist文件夹,合并的代码打印在文件夹里面的main.js里面

在HTML里面引入main.js