nrm：提供了一些最常用的NPM包镜像地址，能够让我们快速切换安装包时候的服务器地址。
npm install nrm -g nrm ls //查看镜像列表 nrm use taobao //使用这个镜像 nrm use cnpm //使用这个镜像 nrm use npm //使用这个镜像！ nrm只是提供了几个常用地URL地址，并能够让我们在这几个地址之间切换。但是我们每次装包的时候使用的装包工具都是npm。
在网页中会引用哪些常见的静态资源？
JS JSX .coffee .ts（TypeScript）CSS .less .sass .scssImages .jpg .png .bmp .svg字体文件（Fonts） .svg .ttf 模板文件ejs .jade .vue【这是在webpack中定义组件的方式，推荐这么用】网页中引入静态资源多了以后有什么问题
网页加载速度慢，因为我们要发起很多二次请求。要处理错综复杂的依赖关系。如何解决上述两个问题
合并、压缩、精灵图、图片的Base64编码可以使用requireJS，也可以使用webpack，可以解决各个包之间的复杂依赖关系。npm init会生成一个pakeage.json文件，这个文件主要是用来记录这个项目的详细信息的，它会将我们在项目开发中所要用到的包，以及项目的详细信息等记录在这个项目中。方便在以后的版本迭代和项目移植的时候会更加的方便。也是防止在后期的项目维护中误删除了一个包导致的项目不能够正常运行。使用npm init初始化项目还有一个好处就是在进行项目传递的时候不需要将项目依赖包一起发送给对方，对方在接受到你的项目之后再执行npm install就可以将项目依赖全部下载到项目里。
package.json（npm init自动生成的）
{ "name": "webpack_study", //项目名 "version": "1.0.0", //项目版本号 "description": "", //项目描述 "main": "main.js", //项目入口 "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "bluenight", "license": "ISC", "dependencies": { "jquery": "^3.5.1" } }main.js（含ES6语法）
// 这是main.js是我们项目的JS入口文件 import $ from 'jquery' // [导入JQuery] // const $ = require('jquery') $(function(){ $('li:odd').css('backgroundColor', 'yellow') $('li:even').css('backgroundColor', function(){ return '#' + 'D97634' }) }) 将文件打包 webpack ./src/main.js ./dist/bundle.js // 低版本webpack webpack ./src/main.js -o ./dist/bundle.js //高版本webpack webpack.config.js配置文件 const path = require("path") module.exports = { entry:path.join(__dirname, './src/main.js'), output:{ path:path.join(__dirname, './dist'), filename:'bundle.js' } }配置完成之后使用webpack 即可打包。
D:\Code\webpack-study>webpack在浏览器地址栏输入http://localhost:8080/可以进入根目录
路径地址含义
. / ：当前目录. . / ：父级目录/ ：根目录 //将index.html中的路径地址修改为 /bundle.js <script src="/bundle.js" type="text/javascript" charset="utf-8"</script>webpack-dev-server帮我们打包的bundle.js并没有存放到物理磁盘，而是存放到内存中，相当于放在了项目的根目录下，但是实际上在根目录下找不到这个文件。
–open：自动打开浏览器 –port 3000 ：设置端口号为3000 –contentBase src：打开路径 –hot：热更新
在webpack.config.js中配置 const path = require("path") const webpack = require("webpack") //启用热更新的第2步 module.exports = { entry:path.join(__dirname, './src/main.js'), output:{ path:path.join(__dirname, './dist'), filename:'bundle.js' }, devServer:{ //配置dev-server open:true, hot:true, contentBase:"src", port:3000 }, plugins:[ //配置插件的节点 new webpack.HotModuleReplacementPlugin()//new 一个热更新的模块对象，这是启用热更新的第3步 ] }当我们使用css样式时，如何避免引入link标签？ 解决方法是使用loader。
如果要处理非JS类型的文件，我们需要手动安装一些合适的第三方loader加载器。 如果想要打包处理css文件，需要安装style-loader css-loader。
npm install style-loader css-loader -D //本地安装style-loader和css-loader打开webpack.config.js这个配置文件，在里面新增一个配置节点module，它是一个对象，在这个对象身上有个rules属性，这个属性是一个数组，存放了所有第三方文件的匹配和处理规则。 需要配置的文件有：创建好需要打包的资源文件（css/less/scss），配置webpack.config.js，导入main.js
loader处理css文件 index.css li{ list-style: none; }webpack.config.js
//... module.exports = { //... module:{//配置第三方模块 加载器 rules:[ {test:/\.css$/, use:['style-loader','css-loader']} //配置处理.css文件的第三方loader规则 ] } }main.js
//... import "./css/index.css" //...注意：webpack处理第三方类型的过程：
发现这个要处理的文件不是JS文件，然后就去配置文件中，查找有没有对应的第三方loader规则。如果能找到对应的规则，就会调用对应的loader处理这种文件类型。在调用loader的时候是从后往前调用的。当最后一个loader调用完毕，会把处理的结果直接交给webpack打包合并，最终输出到bundle.js loader处理less文件 npm install less -D //安装less npm install less-loader -D //安装less-loader ul{ padding: 0; margin: 0; }webpack.config.js
//... module.exports = { //... module:{//配置第三方模块 加载器 rules:[ //... {test:/\.less$/,use:['style-loader', 'css-loader', 'less-loader']}//配置处理.less文件的第三方loader规则 ] } }main.js
//... import "./css/index.less" //... loader处理scss文件 npm i node-sass -D //安装node-scss npm install sass-loader -D //安装scss-loaderindex.scss
html, body{ margin: 0; padding: 0; } li{ font-size: 20px; line-height: 30px; }webpack.config.js
//... module.exports = { //... module:{//配置第三方模块 加载器 rules:[ //... {test:/\.less$/,use:['style-loader', 'css-loader', 'less-loader']}//配置处理.less文件的第三方loader规则 ] } }main.js
//... import "./css/index.scss" //...webpack处理图片/字体需要安装url-loader
安装 npm i url-loader file-loader -D //安装url-loader和file-loader 处理图片文件 index.css body { background: url(../iamges/k-on.jpg); //图片 background-size: cover; }在webpack.config.js中的配置
module:{ rules:[ //... {test:/\.(jpg|png|gif|bmp|jepg)$/,use:'url-loader?limit=691,961'}//配置处理图片文件的第三方loader规则 ] }此时背景图片k-on会被转换成base64编码，需要给use传参 修改匹配规则：
{test:/\.(jpg|png|gif|bmp|jepg)$/,use:'url-loader?limit=691,961&name=[hash:8]-[name].[ext]'}有如下参数 limit：的值 name：图片的名称 [name].[ext]：取原图片的名称 [hash]：哈希值，[hash:8]表示取8位 为什么使用哈希值？ 如果项目中使用了同名的图片文件，防止图片重名。 3. 处理字体文件
npm i bootstrap@3.3.7 -S //安装bootstrap 3.3.7webpack.config.js
module:{ rules:[ //... {test:/\.(ttf|eot|woff|woff2|svg)$/,use:'url-loader'} //配置处理字体文件的loader规则 ] }在index.html中使用字体样式
//... <span class="glyphicon glyphicon-star" aria-hidden="true">这是配置好的字体文件</span>