安装webpack并使用打包
# 全局安装 安装最新版本 @4.28.4,这样会有兼容性问题，所以选择安装 @3.8.1版本
1npm i [email protected] -g
# npm 初始化
npm init -y
2# 安装jquery
npm i jquery -D
3# 安装webpack-dev-server
npm i [email protected] -D
npm i [email protected] --save-dev
一全局打包
webpack .\src\main.js .\dist\bundle.js
二自动打包
安装依赖和插件
1html-webpack-plugin插件
2.css .less .sass依赖
3url 依赖
npm install html-webpack-plugin --save-dev
npm install stylus-loader css-loader style-loader --save-dev
npm install less less-loader --save-dev
cnpm install node-sass --save-dev
cnpm install sass-loader --save-dev
cnpm i url-loader
cnpm i url-loader file-loader -D
npm太慢， 淘宝npm镜像使用方法
通过cnpm使用
npm install -g cnpm --registry=https://registry.npm.taobao.org
使用
cnpm install express
安装sass-loader 需要使用cnpm安装提高成功性
安装sass方式1
npm install --save node-sass --registry=https://registry.npm.taobao.org --disturl=https://npm.taobao.org/dist --sass-binary-site=http://npm.taobao.org/mirrors/node-sass
安装sass方式2
安装淘宝镜像
npm install -g cnpm --registry=http://registry.npm.taobao.org
cnpm install
安装sass的依赖包
cnpm install --save-dev sass-loader //sass-loader依赖于node-sass
cnpm install --save-dev node-sass
可能存在的问题
Module build failed: TypeError: utils.getOptions is not a function
解决办法
cnpm install --global vue-cli
cnpm install vue
cnpm install vue-loader vue-template-compiler loader-utils
参考:https://blog.csdn.net/xuelang532777032/article/details/72821028
安装url-loader 访问简单图片
cnpm i url-loader file-loader -D
参考:https://blog.csdn.net/Tomwildboar/article/details/82146392
安装bootstrap
例如
cnpm i bootstrap -S
因为4.X版本Boostrap把icon分离出来作为一个单独的项目open-iconic，所以单纯的只引入Boostrap项目是不够的，还需要下载open-iconic项目(Git：https://github.com/iconic/open-iconic)
下载：npm i [email protected] -D
由于4.x版本icon文件分离出去所以还需要下载open-iconic：
npm i https://github.com/iconic/open-iconic.git -D(下载可能有点慢，要花个几分钟，可用cnpm下载)
在index.js中引入
import 'bootstrap/dist/css/bootstrap.css'
import 'open-iconic/font/css/open-iconic-bootstrap.css'
1 import 'bootstrap/dist/css/bootstrap.css'
2 import 'open-iconic/font/css/open-iconic-bootstrap.css'
在webpack.config.js中配置
//处理字体文件
{test:/\.(ttf|eot|svg|woff|woff2|otf)$/, use: 'url-loader'}
在html中引用
参考:https://blog.csdn.net/hyt941026/article/details/82870805
json里面不能写注释
webpack babel
在webpack中，默认只能处理一部分ES6语法的js
某些处理不了 需要第三方loader处理
安装babel
第一套包：cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套包：cnpm i babel-preset-env babel-preset-stage-0 -D
打卡webpack的配置文件，在module节点下的rules数组下，提那家爱一个新的匹配规则
{test:/\.js$/,use:'babel-loader',exclude:/node_modules/}
注意：在配置babel的loader规则的时候，必须把node_modules目录，通过exclude排除掉
在项目的根目录中，新建一个叫 .babelrc 的Babel配置文件，这个配置文件，属于JSON格式
尝试解决方法
来源b站vue-108网友视频弹幕
https://www.bilibili.com/video/av36650577/?p=108
cnpm i -D babel-loader@7 babel-core babel-preset-env
安装babel成功 demo演示如下
.css. less.sass依赖
淘宝npm镜像使用方法
webpack打包
其他:
https://www.cnblogs.com/yc-braveheart/p/8462241.html
sass-loader安装
https://blog.csdn.net/web_youth/article/details/80052969
https://www.cnblogs.com/ww03/p/6037710.html
https://blog.csdn.net/qq_36416878/article/details/79654732
https://blog.csdn.net/u014181418/article/details/52709985入门Webpack，看这篇就够了