前段学习 之 webpack 学习记录
自动化安装
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、前台调用