前段学习 之 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、前台调用