Vue和webpack俨然成为前端市场的主导 但是很多来我这里面试的小伙伴依然不知道怎么去搭建vue的开发环境 为此深感惋惜 很多人都在一味的图快只做唯命是从的代码搬运工 ，今天给大家一起学习的是webpack+Vue+mint-ui / element的Vue基础架构搭建
看完之后再看看我的webpack4.x是怎么玩的吧 如受益 请留言
VUE
概述
webpack 是一个现代 JavaScript 应用程序的模块打包器(module bundler)
webpack 是一个模块化方案（预编译）
webpack获取具有依赖关系的模块，并生成表示这些模块的静态资源
webpack的两个作用：1 模块化 2 打包
四个核心概念：入口 (entry)、输出 (output)、加载器 loader、插件 (plugins)
模块化方案: webpack 和 requirejs（通过编写代码的方式将前端的功能，划分成独立的模块）
补充：browserify 是与 webpack 相似的模块化打包工具
webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack)
requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 )
webpack起源
-
webpack解决了现存模块打包器的两个痛点：
1 静态资源的模块化处理方案
2 Code Spliting - 代码分离
webpack与模块
在webpack看来：所有的静态资源都是模块
webpack 模块能够识别以下等形式的模块之间的依赖：
-
JS的模块化规范：
ES2015
importexportCommonJS
require()module.exportsAMD
define和require
非JS等静态资源：
css/sass/less 文件中的
@import图片连接，比如：样式
url(...)或 HTML<img src=...>字体 等
安装 webpack
全局安装：
npm i -g [email protected]目的：在任何目录中通过CLI使用
webpack这个命令项目安装：
npm i -D [email protected]目的：执行当前项目的构建
webpack 的基本使用
安装：
npm i -D webpackwebpack的两种使用方式：1 命令行 2 配置文件（
webpack.config.js）
命令行方式演示 - demo：隔行变色
1 使用
npm init -y初始package.json，使用npm来管理项目中的包2 新建
index.html和main.js，实现隔行变色功能3 运行
webpack src/js/main.js dist/bundle.js进行打包构建，语法是：webpack 入口文件 输出文件4 注意：需要在页面中引入 输出文件 的路径（此步骤可通过配置webpack去掉）
/*
src/js/index.js
*/
// 1 导入 jQuery
import $ from 'jquery'
// 2 获取页面中的li元素
const $lis = $('#ulList').find('li')
// 3 隔行变色
// jQuery中的 filter() 方法用来过滤jquery对象
$lis.filter(':odd').css('background-color', '#def')
$lis.filter(':even').css('background-color', 'skyblue')
配置文件方式（推荐）
/*
webpack.config.js
运行命令：webpack
entry 入口的配置说明：
https://doc.webpack-china.org/concepts/entry-points
*/
var path = require('path')
module.exports = {
// 入口文件
entry: path.join(__dirname, 'src/js/main.js'),
// 出口文件
output: {
path: path.join(__dirname, './dist'), // 输出文件的路径
filename: 'bundle.js' // 输出文件的名称
}
}
webpack-dev-server
安装：
npm i -D webpack-dev-server作用：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率
注意：无法直接在终端中执行
webpack-dev-server，需要通过package.json的scripts实现使用方式：
npm run dev
"scripts": {
"dev": "webpack-dev-server"
}
使用说明
注意：
webpack-dev-server将打包好的文件存储在内存中，提高编译和加载速度，效率更高注意：输出的文件被放到项目根目录中
命令行中的提示：
webpack output is served from /在
index.html页面中直接通过/bundle.js来引入内存中的文件
配置说明 - CLI配置
--contentBase：告诉服务器在哪个目录中提供服务，此处用来指定打开哪个目录中的index.html页面--contentBase ./：当前工作目录--contentBase ./src：当前目录下的src目录--open：自动打开浏览器--port：端口号--hot：热更新，只加载修改的文件(按需加载修改的内容)，而非全部加载
/* package.json */
/* 运行命令：npm run dev */
{
"scripts": {
"dev": "webpack-dev-server --contentBase ./src --open --port 8888 --hot"
}
}
配置说明 - webpack.config.js
const webpack = require('webpack')
devServer: {
// 服务器的根目录 Tell the server where to serve content from
// https://webpack.js.org/configuration/dev-server/#devserver-contentbase
contentBase: path.join(__dirname, './'),
// 自动打开浏览器
open: true,
// 端口号
port: 8888,
// --------------- 1 热更新 -----------------
hot: true
},
plugins: [
// ---------------- 2 启用热更新插件 ----------------
new webpack.HotModuleReplacementPlugin()
]
## html-webpack-plugin 插件
安装：
npm i -D html-webpack-plugin作用：1 根据模板生成html页面 2 自动引入用到的
bundle.js、css等文件
/* webpack.config.js */
const htmlWebpackPlugin = require('html-webpack-plugin')
// ...
plugins: [
new htmlWebpackPlugin({
// 模板页面路径
template: path.join(__dirname, './index.html'),
// 在内存中生成页面路径，默认值为：index.html，可省略
// filename: 'index.html'
})
]
Loaders （加载器）
webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.
webpack只能处理JavaScript资源
webpack通过loaders处理非JavaScript静态资源
CSS 打包
1 CSS打包文件（加载）
2 SASS打包文件（编译为CSS）
使用webpack打包CSS
安装：
npm i -D style-loader css-loader注意：use中模块的顺序不能颠倒，加载顺序：从右向左加载
/* index.js */
// 导入 css 文件
import './css/app.css'
/* webpack.config.js */
// 配置各种资源文件的loader加载器
module: {
// 配置匹配规则
rules: [
// test 用来配置匹配文件规则（正则）
// use 是一个数组，按照从后往前的顺序执行加载
{test: /\.css$/, use: ['style-loader', 'css-loader']},
]
}
使用webpack打包sass文件
安装：
npm i -D sass-loader node-sass注意：
sass-loader依赖于node-sass模块SASS 和 LESS 一样，都是预编译的CSS
SASS 有两种类型的后缀：1 .sass 2 .scss
注意：
node-sass这个包安装的时候，如果失败了，就用cnpm i -D node-sass
/* webpack.config.js */
// 参考：https://webpack.js.org/loaders/sass-loader/#examples
// "style-loader" ：creates style nodes from JS strings 创建style标签
// "css-loader" ：translates CSS into CommonJS 将css转化为CommonJS代码
// "sass-loader" ：compiles Sass to CSS 将Sass编译为css
module:{
rules:[
{test: /\.(scss|sass)$/, use: ['style-loader', 'css-loader', 'sass-loader']},
]
}
图片和字体打包
安装：
npm i -D url-loader file-loaderfile-loader：加载并重命名文件（图片、字体 等）url-loader：将图片或字体转化为base64编码格式的字符串，嵌入到样式文件中
/* webpack.config.js */
module: {
rules:[
// 打包 图片文件
{ test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader' },
// 打包 字体文件
{ test: /\.(woff|woff2|eot|ttf|otf)$/, use: 'file-loader' }
]
}
图片打包细节
-
limit参数的作用：（单位为：字节(byte)）当图片文件大小（字节）
小于指定的limit时，图片被转化为base64编码格式当图片文件大小（字节）
大于等于指定的limit时，图片被重命名以url路径形式加载（此时，需要file-loader来加载图片）
图片文件重命名，保证相同文件不会被加载多次。例如：一张图片（a.jpg）拷贝一个副本（b.jpg），同时引入这两张图片，重命名后只会加载一次，因为这两张图片就是同一张
文件重命名以后，会通过MD5加密的方式，来计算这个文件的名称
/* webpack.config.js */
module: {
rules: [
// {test: /\.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=100'},
{
test: /\.(jpg|png|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 8192
}
}
]
}
]
}
字体文件打包说明
- 处理方式与图片相同，可以使用：
file-loader或url-loader
babel
Babel is a JavaScript compiler. Use next generation JavaScript, today.
Babel 是一个JavaScript编译器。今天就能够使用下一代JavaScript
安装：
npm i -D babel-core babel-loader安装：
npm i -D babel-preset-env
基本使用（两步）
- 第一步：
/* webpack.config.js */
module: {
rules: [
// exclude 排除，不需要编译的目录，提高编译速度
{test: /\.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}
- 第二步：在项目根目录中新建
.babelrc配置文件
/* .babelrc */
// 将来babel-loader运行的时候，会检查这个配置文件，并读取相关的语法和插件配置
{
"presets": ["env"]
}
babel 的说明
babel的作用
-
1 语法转换：将新的ES语法转化为浏览器能识别的语法（babel-preset-*）
var fn = () => {}
2 transform-runtime 浏览器兼容：让低版本浏览器兼容最新版ES的API
babel-preset-
作用：将新的ES语法转化为浏览器能识别的ES5代码
比如：
babel-preset-es2015就是转化ES2015这个版本的JS语法ES2015 也就是 ES6, 下一个版本是ES7, 从 ES6 到 ES7之间经历了 5 个阶段
Stage 0 is "i've got a crazy idea",
stage 1 is "this idea might not be stupid",
stage 2 is "let's use polyfills and transpilers to play with it",
stage 3 is "let's let browsers implement it and see how it goes",
stage 4 is "now it's javascript".
transform-runtime
作用：实现浏览器对不支持API的兼容（兼容旧环境、填补）
安装：
npm i -D babel-plugin-transform-runtime和npm i -S babel-runtime注意：babel-runtime包中的代码会被打包到你的代码中（-S）
/*
transform-runtime 的使用步骤：
1 在 .bablerc 中，添加如下配置即可
*/
"plugins": [
"transform-runtime"
]
总结
babel-core babel核心包
babel-loader 用来解析js文件
babel-preset-* 新ES语法的解析和转换
transform-runtime 兼容旧浏览器，到达支持新API目的
vue 单文件组件
single-file components(单文件组件)
后缀名：
.vue，该文件需要被预编译后才能在浏览器中使用注意：单文件组件依赖于两个包 vue-loader / vue-template-compiler
安装：
npm i -D vue-loader vue-template-compiler
<!-- App.vue 示例代码： -->
<template>
<div>
<h1>VUE 单文件组件示例 -- App.vue</h1>
<p>这是 模板内容</p>
</div>
</template>
<script>
// 组件中的逻辑代码
export default {}
</script>
<style>
/* 组件样式 */
h1 {
color: red;
}
</style>
// webpack.config.js 配置：
module: {
rules: [
{
test: /\.vue$/,
loader: 'vue-loader'
}
]
}
使用单文件组件
/* main.js */
import Vue from 'vue'
// 导入 App 组件
import App from './App.vue'
const vm = new Vue({
el: '#app',
// 通过 render 方法，渲染App组件
render: c => c(App)
})
单文件组件使用步骤
1 安装：
npm i -D vue-loader vue-template-compiler-
2 在
webpack.config.js中配置.vue文件的loader{ test: /\.vue$/, use: 'vue-loader' }
3 创建
App.vue单文件组件，注意：App可以是任意名称4 在
main.js入口文件中，导入vue和App.vue组件，通过 render 将组件与实例挂到一起
单文件组件+路由
import Vue from 'vue'
import App from './App.vue'
// ------------- vue路由配置 开始 --------------
import Home from './components/home/Home.vue'
import Login from './components/login/Login.vue'
// 1 导入 路由模块
import VueRouter from 'vue-router'
// 2 ** 调用use方法使用插件 **
Vue.use(VueRouter)
// 3 创建路由对象
const router = new VueRouter({
routes: [
{ path: '/home', component: Home },
{path: '/login', component: Login }
]
})
// ------------- vue路由配置 结束 --------------
const vm = new Vue({
el: '#app',
render: c => c(App),
// 4 挂载到 vue 实例中
router
})
Mint-UI
基于 Vue.js 的移动端组件库
快速开始
- 安装：
npm i -S mint-ui
// 1 导入 mint-ui模块
import MintUI from 'mint-ui'
// 2 导入 样式
import 'mint-ui/lib/style.css'
// 3 注册插件
Vue.use(MintUI)
ElementUI
这是PC端的UI组件库
安装：
npm i -S element-ui
{
"presets": [
["es2015", { "modules": false }], "stage-0"
],
"plugins": [
["component", [
{
"libraryName": "mint-ui",
"style": true
},
{
"libraryName": "element-ui",
"styleLibraryName": "theme-default"
}
]
]
]
}
vue 的脚手架 - vue-cli
脚手架: 快速生成项目的目录结构
比如: vue的脚手架
vue-cli, 安装了vue的脚手架以后, 直接通过一条命令就可以生成一个vue项目的目录结构( webpack都配置好了 )注意: 初始化脚手架的时候 ,所在路径不能包含中文* !!!!
vue脚手架的使用步骤:
1 全局安装 npm i -g vue-cli
2 通过vue命令初始化一个带有webpack模板的项目结构: vue init webpack my-project
我们使用脚手架构建vue项目的时候, 只需要修改 src目录 中的内容即可!!!
拿到项目, 第一件事就是: npm i 安装项目中使用的模块
让项目跑起来: npm run dev / npm start
如果看完以上的内容并且可以搭建出完整的前端架构 可以运行打包，那么继续努力来看看最新webpack4吧
webpack 4.X 使用
1
npm i -g webpack2
npm i -D webpack webpack-cli3
webpack --mode development ./src/main.js
使用上的变化：
1 需要单独安装 webpack-cli 才能使用 webpack命令
2 使用webpack命令需要指定模式（development 或者 production）
3 默认的入口为：./src 默认出口为：./dist
4 可以修改入口文件路径，也可指定出口路径
5 打包变得更快更灵活