前段學習 之 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實例

七、前臺調用