前段学习 之 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 进行打包

一、npm install webpack -g

二、建立站点 mkdir webpack

三、进入站点 cd webpack

四、npm init 建立package.json 文件

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

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

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

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

怎样使用 webpack-dev-server

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

二、配置 package.json

三、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

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

二、配置 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

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

二、npm install less --save-dev

三、配置 webpack.config.js

-------

使用 图片 url loader

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

二、配置 webpack.config.js

-----------

webpack 使用 .vue 文件

0.npm install -vue-s 安装

一、import Vue from 'vue'

二、建立.vue文件并引入 import login from './login.vue'

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

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

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

六、引入 plugins

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

plugins:[

new VueLoaderPlugin()

],

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

webpack 使用路由

一、安装路由 npm install vue-router -S

二、导入路由包 import VueRouter from 'vue-router'

三、安装 VueRouter Vue.use(VueRouter)

四、导入组件

五、建立路由对象 配置匹配规则

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

七、前台调用