欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

前段学习 之 webpack 学习记录

程序员文章站 2022-06-26 10:03:58
自动化安装 1.安装node (node -v查看node版本) 2.全局安装vue-cli Npm install -g vue-cli Vue- v:查看是否安装成功 Vue list:查看可用的模板 3.创建一个基于 "webpack" 模板的新项目 Vue init webpack proj ......

自动化安装

1.安装node (node -v查看node版本)

2.全局安装vue-cli  npm install -g vue-cli  vue- v:查看是否安装成功  vue list:查看可用的模板

3.创建一个基于 "webpack" 模板的新项目 vue init webpack project-name

手动安装
怎么使用webpack 进行打包

1、npm install webpack -g

2、创建站点 mkdir webpack

3、进入站点 cd webpack

4、npm init 创建package.json 文件

5、npm install --save-dev webpack 下载node_modules文件夹

6、npm install webpack-cli --save //安装webpack脚手架

7、webpack ./src/main.js -o ./dist/bundle.js --mode development

-------------

怎样使用 webpack-dev-server

1、npm install webpack-dev-server --save-dev

2、配置 package.json

3、npm run dev

----------------------------
使用jquery

1.npm install jquery --save-dev
2.在webpack.config.js 里添加

var webpack = require('webpack'),

module.exports 里面添加

plugins: [
new webpack.provideplugin({
"$": "jquery",
"jquery": "jquery",
"window.jquery": "jquery"
})
],

----------------------------
使用css loader

1、npm install style-loader css-loader --save-dev

2、配置 webpack.config.js

---------------------
使用bootstrap4

1.npm install bootstrap --save-dev
2.npm install popper --save-dev

bootstrap里面还有些其文件 所以在匹配loader时还需要添加

{test: /\.eot(\?v=\d+\.\d+\.\d+)?$/,use: "file-loader" },
{test: /\.(woff|woff2)$/,use: "url?prefix=font/&limit=5000"},
{test: /\.ttf(\?v=\d+\.\d+\.\d+)?$/,use: "url?limit=10000&mimetype=application/octet-stream"},
{test: /\.svg(\?v=\d+\.\d+\.\d+)?$/,use: "url?limit=10000&mimetype=image/svg+xml"}

----------------------------

使用less-loader

1、npm install less-loader --save-dev

2、npm install less --save-dev

3、配置 webpack.config.js

-------

使用 图片 url loader

1、npm install url-loader file-loader --save-dev

2、配置 webpack.config.js

-----------

webpack 使用 .vue 文件

0.npm install -vue-s 安装

1、import vue from 'vue'

2、创建.vue文件并引入 import login from './login.vue'

3、将组件 挂载到vue实例中

4、安装第三方 loader npm install vue-loader vue-template-compiler --save-dev

5、配置webpack.config.js中的匹配规则

6、引入 plugins

const vueloaderplugin = require('vue-loader/lib/plugin')

plugins:[

new vueloaderplugin()

],

--------------------------------

webpack 使用路由

1、安装路由 npm install vue-router -s

2、导入路由包 import vuerouter from 'vue-router'

3、安装 vuerouter vue.use(vuerouter)

4、导入组件

5、创建路由对象 配置匹配规则

6、将路由对象 挂载到vue实例

7、前台调用