记录：259
本例环境：
Node.js: v14.17.3
Npm: 6.14.13
webpack: 4.46.0
Visual Studio Code: 1.59.1
一、名词
Node.js：一个基于Chrome V8引擎的JavaScript运行时；运行在服务端的JavaScript，基于事件驱动I/O服务端JavaScript环境。
npm：a JavaScript package manager(JavaScript包管理器)。
webpack：前端项目构建工具（打包工具），功能包括模块化支持、代码压缩混淆、处理js兼容问题、性能优化等。
二、常用命令
官网：https://www.npmjs.cn/
查看模块版本：npm view jquery versions
安装模块：npm install jquery ?-S
卸载模块：npm uninstall jquery
安装模块（指定版本）：npm install jquery@3.3.0 ?-S
查看相应配置信息：npm config ls
查看镜像源：npm config get registry
设置镜像源：npm config set registry https://registry.npm.taobao.org
安装模块（全局安装）：npm i -g @vue/cli
注意一：
全局安装模块时出现报错信息：Error: EPERM: operation not permitted。
本例解决：使用管理员模式运行命令行
注意二：
-D：?-save-dve简写，自动把模块和版本号添加到package.json文件的devDependencies中，开发环境中协助开发需要使用。
-S：-save简写，自动把模块和版本号添加到package.json文件的dependencies中，在生产环境打包时需要使用。
安装时，没有指定版本的话，默认安装最新。
三、webpack
本例以webpack_demo项目为例，记录体验步骤。
1.初始化webpack_demo
1.1新建webpack_demo目录
使用Visual Studio Code工具打开，在Terminal->New Terminal新建一个终端窗口。
?1.2初始化包管理配置文件
执行命令：npm init -y
在webpack_demo下生成package.json文件，即包管理配置文件。
1.3在webpack_demo下创建src目录
1.3.1在webpack_demo/src目录下创建index.html和index.js文件
1.3.2在webpack_demo/src目录下创建如下目录
webpack_demo\src\components：存放vue相关组件
webpack_demo\src\css：存放样式表相关文件
webpack_demo\src\images：存放图片文件
注:本例在https://www.iconfont.cn/下载了图片，非商业免费使用。
2.安装jQuery
2.1安装jQuery
执行命令：npm install jquery -S
在webpack_demo目录中生成node_modules，在node_modules存放安装的各类模块，当前安装模块jquery在webpack_demo\node_modules\jquery中。
2.2使用jQuery
在webpack_demo\src\index.js中添加如下代码：
import $ from 'jquery'$(function(){$('#stage01').css('backgroundCokor','red')$('#stage02').css('backgroundCokor','blue')$('#stage03').css('backgroundCokor','green')})
注意：import $ from 'jquery'是ECMAScript 6.0语法。
以上代码在index.html导入index.js运行会报错。
报错信息：Uncaught SyntaxError: Cannot use import statement outside a module
原因：在index.js中的import $ from 'jquery'是ECMAScript 6.0语法。
本例解决方式：借助webpack，在webpack.config.js导入。
3.安装webpack
3.1安装webpack
执行指令：npm install webpack webpack-cli –D
3.2在webpack_demo\目录下新建webpack.config.js
当前webpack.config.js配置：
module.exports = {mode: 'development'}
3.3在webpack_demo\目录下配置package.json
在scripts节点新增：
"dev": "webpack"当前package.json的scripts配置：
"scripts": {"test": "echo \"Error: no test specified\" && exit 1","dev": "webpack"}
3.4在Terminal中运行指令打包
执行指令：npm run dev
实际执行：npm run webpack
3.5打包后默认生成在webpack_demo\dist的main.js中
3.6在index.html导入打包后js文件即添加如下导入
<script src="../dist/main.js"></script>3.7运行index.html查看效果
?以上，每次修改内容后，均需要重新执行npm run dev才能生效。
4.自定义打包入口和出口
本例打包入口文件：webpack_demo\src\index.js
本例打包入口文件：webpack_demo\dist\bundle.js
4.1在webpack.config.js中配置
打包入口节点：entry
打包出口节点：output
配置：
entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'},
4.2在index.html导入打包后js文件即添加如下导入
<script src="../dist/bundle.js"></script>4.3运行index.html查看效果
?以上，每次修改代码均需重新运行npm run dev才能生效，没有热部署效果。
5.配置自动打包
5.1安装webpack-dev-server包
执行指令：npm install webpack-dev-server –D
5.2修改package.json中dev节点
将"dev": "webpack"替换掉
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 8081"注：--open 打开自动部署；--host 指定ip地址；--port 指定端口。
5.3在index.html导入打包后js文件即添加如下导入
<script src="/bundle.js"></script>5.4解决启动不成功问题
5.4.1启动不成功日志信息，即在Project is running at:后无发布地址
?本例使用指令未指定版本号，即默认最新版本，是版本不匹配问题，当前版本如下：
"webpack": "^5.52.0","webpack-cli": "^4.8.0","webpack-dev-server": "^4.1.0"
本例使用指定版本进行体验。
5.4.2删除package.json中配置，重新执行如下指令
npm install webpack@4.46.0 webpack-cli@3.3.12 –Dnpm install webpack-dev-server@3.11.2 –D
5.4.3查看包都有哪些版本
npm view webpack versionsnpm view webpack-cli versionsnpm view webpack-dev-server versions
5.5运行成功日志信息
5.6运行成功自动启动页面
5.7在页面中点击src即可进入index.html页面
?以上自动打开后，需要再点击才能进入index.html页面。配置直接打开浏览器就进入index.html页面。
6.配置生成预览页面
6.1安装包
执行指令：npm install html-webpack-plugin@4.5.2 –D
6.2在webpack.config.js配置
配置插件，当前配置文件如下：
const path = require('path')const?HtmlWebpackPlugin?=?require('html-webpack-plugin')const htmlWebpackPlugin = new HtmlWebpackPlugin({template: './src/index.html',filename: 'index.html'})module.exports = {mode: 'development',entry: path.join(__dirname, './src/index.js'),output: {path: path.join(__dirname, './dist'),filename: 'bundle.js'},plugins: [htmlWebpackPlugin]}
6.3启动即跳转到index.html页面
以上，默认打包js文件，打包非.js文件需配置各类loader加载器。
7.配置打包css文件的loader
7.1安装包
执行指令：npm install style-loader@1.3.0 css-loader@3.6.0 -D
7.2在webpack.config.js配置规则
在module->rules->test节点中配置规则
注：关键字test表示匹配的文件类型；use表示对应要调用的loader。
当前webpack.config.js文件中的module.exports配置如下：
7.3体验css
7.3.1在webpack_demo\src\css\目录下新建01cssdemo.css添加内容如下
#appCss{background-color:orange;}
7.3.2在index.js中引入01cssdemo.css
import './css/01cssdemo.css'7.3.3在index.html添加标签
<div><strong id="appCss">css体验</strong></div>7.3.4效果
?
8.配置打包less文件的loader
Less是一个CSS预处理器，让CSS具有动态性，CSS赋予了动态语言的特性，如变量，继承，运算等。
8.1安装包
执行指令：npm i less-loader@6.2.0 less@3.13.1 -D
8.2在webpack.config.js配置规则
在module->rules->test节点中配置规则
注：关键字test表示匹配的文件类型；use表示对应要调用的loader。
当前webpack.config.js文件中的rules新增：
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] }8.3体验less
8.3.1在webpack_demo\src\css\目录下新建02lessdemo.less添加内容如下
@my-cusColor: red;#appLess{color: @my-cusColor;}
8.3.2在index.js中引入02lessdemo.less
import './css/02lessdemo.less'8.3.3在index.html添加标签
<div><strong id="appLess">less体验</strong></div>8.3.4效果
9.配置打包scss文件的loader
Sass是一个CSS预处理器，让CSS具有动态性，CSS赋予了动态语言的特性，如变量，继承，运算等。
9.1安装包
执行指令：npm i sass-loader@7.3.1 node-sass@4.14.1 -D
9.2在webpack.config.js配置规则
在module->rules->test节点中配置规则
注：关键字test表示匹配的文件类型；use表示对应要调用的loader。
当前webpack.config.js文件中的rules新增：
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] }9.3体验scss
9.3.1在webpack_demo\src\css\目录下新建03scssdemo.scss添加内容如下
$my-cusColor: blue;#appScss{color: $my-cusColor;}
9.3.2在index.js中引入03scssdemo.scss
import './css/03scssdemo.scss'9.3.3在index.html添加标签
<div><strong id="appScss">scss体验</strong></div>9.3.4效果
?
10.配置打包图片和文件的loader
10.1安装包
执行指令：npm i url-loader@2.3.0 file-loader@4.3.0 -D
10.2在webpack.config.js配置规则
在module->rules->test节点中配置规则
注：关键字test表示匹配的文件类型；use表示对应要调用的loader。
当前webpack.config.js文件中的rules新增：
{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=5857' }注：limit指定图片的大小，单位是字节(byte),只有小于limit字节的图片，才会被转为base64图片。
10.3体验加载图
10.3.1在webpack_demo\src\css\目录下添加内容如下01cssdemo.css添加样式
#myImage{width: 100px;height: 100px;background:url('../images/orange.png');}
10.3.2在index.js中引入01cssdemo.css
import './css/01cssdemo.css'10.3.3在index.html添加标签
<div ><div><strong >图片体验</strong></div><div id="myImage"></div></div>
10.3.4效果
11.配置babel处理js文件中高级语法
babel被用来转译ECMAScript 2015+的高级语法至可兼容浏览器的版本。
11.1安装包
转换器指令：npm i babel-loader @babel/core @babel/runtime -D?
语法插件指令：npm i @babel/preset-env @babel/plugin-transform-runtime
@babel/plugin-proposal-class-properties –D
11.2在webpack_demo\目录新建babel.config.js
添加配置：
module.exports = {presets: ['@babel/preset-env'],plugins: ['@babel/plugin-transform-runtime', '@babel/plugin-proposal-class-properties']}
11.3在webpack.config.js配置规则
在module->rules->test节点中配置规则
注：关键字test表示匹配的文件类型；use表示对应要调用的loader。
当前webpack.config.js文件中的rules新增：
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }注：解析不包括导入模块node_modules下的js文件
11.4高级语法
11.4.1在webpack_demo\src\index.html中添加标签
<div ><div><strong >babel体验</strong></div><div><span >女孩子信息如下:</span></div><div ><span id="cup"></span></div><div ><span id="height"></span></div><div ><span id="weight"></span></div><div ><span id="aspect"></span></div></div>
11.4.2在index.js中导入css
import './css/01cssdemo.css'11.4.3在index.js添加标签
class Girl{static cup="C";static height=160;static weight =100;static aspect='漂亮'}$("#cup").text('罩杯: '+ Girl.cup)$("#height").text('身高: '+ Girl.height)$("#weight").text('体重: '+ Girl.weight)$("#aspect").text('外貌: '+ Girl.aspect)
11.4.4效果
12.配置PostCSS
PostCSS是一个用JavaScript工具和插件转换CSS代码的工具。
12.1安装包
执行指令：npm i postcss-loader@4.3.0 autoprefixer@9.8.6 -D
12.2在webpack_demo\目录新建postcss.config.js
配置内容：
const autoprefixer = require('autoprefixer')module.exports = {plugins: [autoprefixer]}
12.3在webpack.config.js配置规则
在module->rules->test节点中配置规则
注：关键字test表示匹配的文件类型；use表示对应要调用的loader。
当前webpack.config.js文件中的rules新增：
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] }注：在css配置后面新增postcss-loader即可。
12.4体验
12.4.1在webpack_demo\src\index.html中添加标签
<div><div><strong >PostCSS体验</strong></div><input type="text" placeholder="PostCSS体验"></div>
12.4.2在index.js中导入css
import './css/01cssdemo.css'12.4.3在webpack_demo\src\css\目录下的01cssdemo.css添加样式
::placeholder {color: blue;font-size: medium;}
12.4.4效果
12.4.5 在没有使用postcss时在IE浏览器样式展现
12.4.6.使用postcss后在IE浏览器样式展现
13.配置Vue加载器
Vue.js渐进式JavaScript 框架。
13.1安装包
加载器执行指令：npm i vue-loader@15.9.8 vue-template-compiler@2.6.0 -D
Vue执行指令：npm i vue@2.6.0?-S
注：vue-template-compiler和vue版本保持一致
13.2在webpack.config.js配置规则
13.2.1导入插件
const VueLoaderPlugin = require('vue-loader/lib/plugin')13.2.2配置插件
plugins: [new VueLoaderPlugin()]13.2.3在module->rules->test节点中配置规则
注：关键字test表示匹配的文件类型；use表示对应要调用的loader。
当前webpack.config.js文件中的rules新增
{ { test: /\.vue$/, use: 'vue-loader' }13.3在webpack_demo\src\components目录下新建App.vue文件
添加内容：
<template><div><div><strong>Vue体验</strong></div><div><span id="vueTiYan">展现App.vue信息</span></div></div></template><script></script><style scoped>#vueTiYan {color: blue;font: medium;}</style>
13.4在webpack_demo\src\index.html中添加标签
<div id="app"></div>13.5在webpack_demo\src\index.js中导入App.vue
import Vue from 'vue'import App from './components/App.vue'const vm = new Vue({el:'#app',render: w => w(App)})
13.6效果
14.体验打包
14.1在package.json节点scripts中增加build指令
"build": "webpack -p"14.2在Terminal中运行指令
执行指令：npm run build
14.3在webpack_demo\dist生成bundle.js和index.html
webpack_demo\dist下文件则是目标文件
14.4访问dist中的index.html效果
15.记录体验
比较完整的体验各个环节细节，有点意思。
2021年9月8日