webpack的基本使用
发布网友
发布时间：2024-09-26 00:29
共1个回答
热心网友
时间：2024-11-17 00:04
官方概念：是一个现代JavaScript应用程序的静态模块打包器静态：文件资源模块：node环境，引入文件，遵循模块化语法除了合并代码，还能翻译和压缩代码作用：
静态模块打包器
翻译和压缩代码
减小代码包体积，让浏览器更快速的打开网页
学习webpack的准备工作安装一个node
npminit初始化这个项目，生成package.json文件
安装并使用webpack
安装并使用webpack注意：
webpack是一个工具，对于所有的项目都可以来使用
不同的项目使用了不同的webpack版本，所以不推荐全局安装，打开老项目的时候，一定要注意版本号
采用局部安装，只是开发依赖，并不是生产依赖，在命令行加上-D
命令如下npmiwebpackwebpack-cli-D
检测是否安装成功npxwebpack-v
修改用模块化的方式来改写代码在tool.js导出模块const?updateDom?=?(id,?content)?=>?{????window.document.getElementById(id).innerHTML?=?content}//导出mole.exports?=?{????updateDom}在index.js中导入模块//导入??const?{?updateDom?}?=?require('./tool.js')updateDom('app',?'index.html')由于现在在index.js使用了require这种模块化的处理方式，所以它无法直接在浏览器中使用，如果直接在index.html中引用，浏览器会报错
使用webpack来做打包命令如下npxwebpack文件名如果没有错误，会生成一个dist的文件夹，里面有一个main.js的文件，说明打包已经操作成功
?
引入打包后的js<!DOCTYPE?html><html?lang="zh"><head>????<meta?charset="UTF-8">????<title>index</title></head><body>????<div?id="app">????</div>????<!--?引入打包后的js文件?-->????<script?src="./dist/main.js"></script></body></html>?
为什么要用webpack有效的处理模块化
把多个相互引用的.js文件打包成一个文件，能够压缩和加密文件，使文件上线更安全
在这个过程中nodejs的作用，它是webpack运行的基础，最终生成的main.js文件还是在浏览器中运行的
webpack的配置文件创建并使用默认配置文件在项目的根目录下，创建一个webpack.config.js的文件内容如下：
mole.exports?=?{mode:?'development',?//?打包方式}作用：导出一个配置项，用来对webpack的打包行为做设置
了解入口和出口入口文件：指定了webpack从哪个文件开始工作，在它的内部会引入其他的模块出口文件：指定了最后打包之后的文件在webpack中的默认出口和入口是：
默认入口：./src/index.js
默认出口：./dist/main.js如果直接在根目录下运行webpack，它会直接去找.src下的index.js，并把打包之后的代码放在dist/main.js下直接省略入口文件，直接打包npxwebpack
设置入口文件在src目录下，新建一个js文件夹，把index.js改成main.js，并把tool.js放在里面
修改配置项，添加entry项entry:'./src/js/main.js'
设置出口文件修改配置项，添加output项
把出口文件设置为在build目录下的bundle.js1、引入nodejs中的path模块2、在output项中，设置出口文件的绝对路径和文件名称
??output:?{??????//设置路径??????path:?path.join(__dirname,?'/build'),??????//?设置名称（默认情况下叫main.js）??????filename:?'bundle.js'??}修改打包的模式mode项用来设置打包的方式，如果不设置默认为proctiondevelopment:开发模式（代码不会混淆，压缩）proction：生产模式（压缩、混淆、加密?不可读）
在打包的时候指定配置文件自己创建一个webpack.dev.js的文件，用来做配置文件内容如下：
mole.exports?=?{??output:{????filename:'boundle.js'??}}我们希望使用我们配置的文件来设置打包格式如下：npxwebpack--configwebpack的配置文件?
简化打包命令定制script在package.json中添加script命令来快速启动webpack
在script中不需要再添加npx,它会自动在node_moles/.bin中去找命令这样我们就得到了两个命令，dev和build可以在小黑窗中运行：npm?run?build,npm?run?dev来运行
小结webpack的配置文件默认名是webpack.config.js，也可以单独指定
学习webpack就学习webpack.config.js的使用。
把webpack的命令集成到script中可以简化打包命令。
可以自行定义入口和出口文件
loader在webpack看来，一切皆模块
loader处理css文件在js中导入css文件
安装一个css-loader包,在配置文件中配置mole
安装style-loader包,再进行配置,style写在css的前面
在html文件中引入生成的打包好的js文件
loadedr处理less文件在js文件中导入less文件
安装一个less-loader包，在配置文件中加一个配置less文件的对象
less-loader写在css-loader的后面
在html文件中引入生成的打包好的js文件
