首页
登录
<!-- 7 路由出口：用来展示匹配路由视图内容 -->
<router-view></router-view>
</div>
<!-- 1 导入 vue.js -->
<script src="./vue.js"></script>
<!-- 2 导入 路由文件 -->
<script src="./node_modules/vue-router/dist/vue-router.js"></script>
<script>
// 3 创建两个组件
const Home = Vue.component('home', {
template: '<h1>这是 Home 组件</h1>'
})
const Login = Vue.component('login', {
template: '<h1>这是 Login 组件</h1>'
})
// 4 创建路由对象
const router = new VueRouter({
routes: [
// 路径和组件一一对应
{ path: '/home', component: Home },
{ path: '/login', component: Login }
]
})
var vm = new Vue({
el: '#app',
// 6 将路由实例挂载到vue实例
router
})
</script>
复制代码
重定向
// 将path 重定向到 redirect
{ path: '/', redirect: '/home' }复制代码
路由其他配置
-
路由导航高亮
- 说明：当前匹配的导航链接，会自动添加router-link-exact-active router-link-active类
- 配置：linkActiveClass
-
匹配路由模式
new Router({
routers:[],
mode: "hash", //默认hash | history 可以达到隐藏地址栏hash值 | abstract，如果发现没有浏览器的 API 则强制进入
linkActiveClass : "now" //当前匹配的导航链接将被自动添加now类
})复制代码
路由参数
- 说明：我们经常需要把某种模式匹配到的所有路由，全都映射到同一个组件，此时，可以通过路由参数来处理
- 语法：/user/:id
- 使用：当匹配到一个路由时，参数值会被设置到 this.$route.params
- 其他：可以通过 $route.query 获取到 URL 中的查询参数 等
// 方式一
如果你需要在模版中使用路由参数 可以这样 {{$router.params.id}}
// 方式二
用户 Rose
<script>
// 路由
var router = new Router({
routers : [
// 方式一 注意 只有/user/1001这种形式能被匹配 /user | /user/ | /user/1001/ 都不能被匹配
// 将来通过$router.params获取参数返回 {id:1001}
{ path: '/user/:id', component: User },
// 方式二
{ path: "user" , component: User}
]
})
// User组件：
const User = {
template: `<div>User {{ $route.params.id }}</div>`
}
</script>
<!-- 如果要子啊vue实例中获取路由参数 则使用this.$router.params 获取路由参数对象 -->
<!-- {{$router.query}} 获取路由中的查询字符串 返回对象 -->
复制代码
嵌套路由 - 子路由
- 路由是可以嵌套的，即：路由中又包含子路由
- 规则：父组件中包含 router-view，在路由规则中使用 children 配置
// 父组件：
const User = Vue.component('user', {
template: `
User Center
个人资料
岗位
`
})
// 子组件[简写]
const UserProfile = {
template: '<h3>个人资料：张三</h3>'
}
const UserPosts = {
template: '<h3>岗位：FE</h3>'
}
// 路由
var router =new Router({
routers : [
{ path: '/user', component: User,
// 子路由配置：
children: [
{
// 当 /user/profile 匹配成功，
// UserProfile 会被渲染在 User 的 <router-view> 中
path: 'profile',
component: UserProfile
},
{
// 当 /user/posts 匹配成功
// UserPosts 会被渲染在 User 的 <router-view> 中
path: 'posts',
component: UserPosts
}
]
}
]
})复制代码
前端模块化
为什么需要模块化
- 1 最开始的js就是为了实现客户端验证以及一些简单的效果
- 2 后来，js得到重视，应用越来越广泛，前端开发的复杂度越来越高
- 3 旧版本的js中没有提供与模块（module）相关的内容
模块的概念
- 在js中，一个模块就是实现特定功能的文件（js文件）
- 遵循模块的机制，想要什么功能就加载什么模块
- 模块化开发需要遵循规范
模块化解决的问题
- 1 命名冲突
- 2 文件依赖（加载文件）
- 3 模块的复用
- 4 统一规范和开发方式
JS实现模块化的规范
-
AMD 浏览器端
-
CommonJS nodejs
- 加载模块：require()
- 导出模块：module.exports = {} / exports = {}
- ES6 中的 import / export
-
CMD 浏览器端
- UMD 通用模块化规范，可以兼容 AMD、CommonJS、浏览器中没有模块化规范 等这些语法
AMD 的使用
Asynchronous Module Definition：异步模块定义，浏览器端模块开发的规范 代表：require.js 特点：模块被异步加载，模块加载不影响后面语句的运行
1、定义模块
// 语法:define(name, dependencies?, factory);
// name表示：当前模块的名称，是一个字符串 可有可无
// dependencies表示：当前模块的依赖项，是一个数组无论依赖一项还是多项 无则不写
// factory表示：当前模块要完成的一些功能，是一个函数
// 定义对象模块
define({})
// 定义方法模块
define(function() {
return {}
})
// 定义带有依赖项的模块
define(['js/a'], function() {})复制代码
2、加载模块
// - 注意：require的第一个参数必须是数组
// 参数必须是数组 表示模块路径 以当前文件为基准,通过回调函数中的参数获取加载模块中的变量 参数与模块按照顺序一一对应
require(['a', 'js/b'], function(a, b) {
// 使用模块a 和 模块b 中的代码
})复制代码
3、路径查找配置
- requirejs 默认使用 baseUrl+paths 的路径解析方式
-
可以使用以下方式避开此设置：
- 1 以.js结尾
- 2 以 / 开始
- 3 包含协议：https:// 或 http://
// 配置示例
// 注意配置应当在使用之前
require.config({
baseUrl: './js' // 配置基础路径为：当前目录下的js目录
})
require(['a']) // 查找 基础路径下的 ./js/a.js
// 简化加载模块路径
require.config({
baseUrl: ‘./js’,
// 配置一次即可，直接通过路径名称（template || jquery）加载模块
paths: {
template: ‘assets/artTemplate/template-native’,
jquery: ‘assets/jquery/jquery.min’
}
})
// 加载jquery template模块
require([‘jquery’, ‘template’])复制代码
4、非模块化和依赖项支持
- 1 添加模块的依赖模块，保证加载顺序（deps）
- 2 将非模块化模块，转化为模块化（exports）
// 示例
require.config({
baseUrl: './js',
paths: {
// 配置路径
noModule: 'assets/demo/noModule'
},
// 配置不符合规范的模块项
shim: {
// 模块名称
noModule: {
deps: [], // 依赖项
exports: 'sayHi' // 导出模块中存在的函数或变量
}
}
});
// 注意点 如果定义模块的时候，指定了模块名称，需要使用该名称来引用模块
// 定义 这个模块名称与paths中的名称相同
define(‘moduleA’, function() {})
// 导入
require.config({
paths: {
// 此处的模块名：moduleA
moduleA: ‘assets/demo/moduleA’
}
})复制代码
5、路径加载规则
-
路径配置的优先级：
- 1 通过 config 配置规则查找
- 2 通过 data-main 指定的路径查找
- 3 以引入 requirejs 的页面所在路径为准查找
复制代码
Webpack
- webpack 官网
- bundle
[ˈbʌndl] 捆绑，收集，归拢，把…塞入
1 webpack 将带有依赖项的各个模块打包处理后，变成了独立的浏览器能够识别的文件
2 webpack 合并以及解析带有依赖项的模块复制代码
概述
webpack 是一个现代 JavaScript 应用程序的模块打包器(特点 module、 bundler)
webpack 是一个 模块化方案（预编译）
webpack获取具有依赖关系的模块，并生成表示这些模块的静态资源
- 四个核心概念：入口(entry)、输出(output)、加载器loader、插件(plugins)
对比
模块化方案: webpack 和 requirejs（通过编写代码的方式将前端的功能，划分成独立的模块）
browserify 是与 webpack 相似的模块化打包工具
webpack 预编译 (在开发阶段通过webpack进行模块化处理, 最终项目上线, 就不在依赖于 webpack)
requirejs 线上的编译( 代码运行是需要依赖与 requirejs 的 )复制代码
webpack起源
-
webpack解决了现存模块打包器的两个痛点：
- 1 Code Spliting - 代码分离 按需加载
- 2 静态资源的模块化处理方案
webpack与模块
- 前端模块系统的演进
- 在webpack看来：所有的静态资源都是模块
- webpack 模块能够识别以下等形式的模块之间的依赖：
-
JS的模块化规范：
- ES2015
import export
- CommonJS
require() module.exports
- AMD
define 和 require
-
非JS等静态资源：
- css/sass/less 文件中的
@import
- 图片连接，比如：样式
url(...) 或 HTML 
- 字体 等
webpack文档和资源
- webpack 中文网
- webpack 1.0
- webpack 2.x+
- 入门Webpack，看这篇就够了
安装webpack
-
全局安装：npm i -g webpack
- 目的：在任何目录中通过CLI使用
webpack 这个命令
-
项目安装：npm i -D webpack
webpack的基本使用
- 安装：
npm i -D webpack
- webpack的两种使用方式：1 命令行 2 配置文件（
webpack.config.js）
命令行方式演示 - 案例：隔行变色
- 1 使用
npm init -y 初始package.json，使用npm来管理项目中的包
- 2 新建
index.html和index.js，实现隔行变色功能
- 3 运行
webpack src/js/index.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 src/js/index.js dist/bundle.js 目录生成在命令行运行目录
/*
运行流程：
1、webpack 根据入口找到入口文件
2、分析js中的模块化语法
3、将所有关联文件 打包合并输出到出口
*/复制代码
webpack-dev-server 配置
一、package.json配置方式
- 安装：
npm i -D webpack-dev-server
- 作用：配合webpack，创建开发环境（启动服务器、监视文件变化、自动编译、刷新浏览器等），提高开发效率
- 注意：无法直接在终端中执行
webpack-dev-server，需要通过 package.json 的 scripts 实现
- 使用方式：
npm run dev
// 参数解释 注意参数是无序的 有值的参数空格隔开
// --open 自动打开浏览器
// --contentBase ./ 指定浏览器 默认打开的页面路径中的 index.html 文件
// --open 自动打开浏览器
// --port 8080 端口号
// --hot 热更新，只加载修改的文件(按需加载修改的内容)，而非全部加载
"scripts": {
"dev": "webpack-dev-server --open --contentBase ./ --port 8080 --hot"
}
复制代码
二、webpack.config.js 配置方式(推荐)
var path = require('path')
module.exports = {
// 入口文件
entry: path.join(__dirname, 'src/js/index.js'),
// 输出文件
output: {
path: path.join(__dirname, ‘dist’), // 输出文件的路径
filename: ‘bundle.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
- 作用：根据模板，自动生成html页面
- 优势：页面存储在内存中，自动引入
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 - Loaders
- webpack - 管理资源示例
webpack enables use of loaders to preprocess files. This allows you to bundle any static resource way beyond JavaScript.
- webpack只能处理JavaScript资源
- webpack通过loaders处理非JavaScript静态资源
1、 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’]},
]
}复制代码
2、 使用webpack打包sass文件
- 安装：
npm i -D sass-loader node-sass
- 注意：
sass-loader 依赖于 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']},
]
}复制代码
3、 图片和字体打包
- 安装：
npm i -D url-loader file-loader
-
file-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' }
]
}复制代码
图片打包细节
/* webpack.config.js */
module: {
rules: [
// {test: /.(jpg|png|gif|jpeg)KaTeX parse error: Expected 'EOF', got '}' at position 31: …ader?limit=100'}̲, { t…/,
use: [
{
loader: ‘url-loader’,
options: {
limit: 8192
}
}
]
}
]
}复制代码
字体文件打包说明
- 处理方式与图片相同，可以使用：
file-loader或url-loader
babel
- babel
- es2015-loose
- babel全家桶
- 安装：
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-*）
- 2 polyfill浏览器兼容：让低版本浏览器兼容最新版ES的API
babel-preset-*
Babel通过语法转换器，能够支持最新版本的JavaScript语法
babel-preset-* 用来指定我们书写的是什么版本的JS代码
- 作用：将新的ES语法转化为浏览器能识别的ES5代码
-
ES6语法提案的批准流程
- ES2015 也就是 ES6, 下一个版本是ES7, 从 ES6 到 ES7之间经历了 5 个阶段
- babel-preset-es2015 转换es6的语法
- babel-preset-stage-0 转换比es6更新的语法
Stage 0 - Strawman（展示阶段）
Stage 1 - Proposal（征求意见阶段）
Stage 2 - Draft（草案阶段）
Stage 3 - Candidate（候选人阶段）
Stage 4 - Finished（定案阶段）
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”.复制代码
babel-polyfill 和 transform-runtime
区别：
polyfill 所有兼容性问题，都可以通过polyfill解决（包括：实例方法）、污染全局环境
runtime 除了实例方法以外，其他兼容新问题都能解决、不污染全局环境
polyfill：如果想要支持全局对象（比如：Promise）、静态方法（比如：Object.assign）或者实例方法（比如：String.prototype.padStart）等，那么就需要使用babel-polyfill
babel-runtime ：提供了兼容旧环境的函数，使用的时候，需要我们自己手动引入
比如： const Promise = require(‘babel-runtime/core-js/promise’)
存在的问题：
1 手动引入太繁琐
2 多个文件引入同一个helper（定义），造成代码重复，增加代码体积
babel-plugin-transform-runtime：
1 自动引入helper（比如，上面引入的 Promise）
2 babel-runtime提供helper定义，引入这个helper即可使用，避免重复
3 依赖于 babel-runtime 插件
transform-runtime插件的使用：
直接在 .bablerc 文件中，添加一个 plugins 的配置项即可！！！
“plugins”: [
“transform-runtime”
]复制代码
/*
babel-polyfill 的使用步骤：
1 main.js
*/
// 第一行引入
require("babel-polyfill")
var s = 'abc'.padStart(4)
console.log(s)
// 2 webpack.config.js 配置
module.exports = {
entry: ['babel-polyfill', './js/main.js']
}复制代码
总结
babel-core babel核心包
babel-loader 用来解析js文件
babel-preset-* 新ES语法的解析和转换
transform-runtime / babel-polyfill 兼容旧浏览器，到达支持新API目的
// 判断浏览器是否兼容 padStart 这个 API
if (!String.prototype.padStart) {
// 如果不兼容, 就自己模拟 padStart的功能实现一份
String.prototype.padStart = function padStart(targetLength,padString) {
}
}复制代码
vue单文件组件
- vue-loader
- single-file components(单文件组件)
- 后缀名：
.vue，该文件需要被预编译后才能在浏览器中使用
- 注意：单文件组件依赖于两个包 vue-loader / vue-template-compiler
- 安装：
npm i -D vue-loader vue-template-compiler
VUE 单文件组件示例 -- App.vue
这是 模板内容
复制代码
// 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)
})复制代码
单文件组件使用步骤
单文件组件+路由
- vue - Vue.use
- Vue.use 和 路由
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 的移动端组件库
- Mint-UI
快速开始
// 1 导入 mint-ui模块
import MintUI from 'mint-ui'
// 2 导入 样式
import 'mint-ui/lib/style.css'
// 3 注册插件
Vue.use(MintUI)复制代码
MUI
- MUI
- MUI 也是移动端的UI库
- 使用：从github下载包，找到dist文件夹，只需要导入样式即可
// 只需要导入 MUI的样式 即可，根据MUI的例子，直接使用HTML结果即可
// 导入样式
import './lib/mui/css/mui.min.css'复制代码
ElementUI
- 这是PC端的UI组件库
- 安装：
npm i -S element-ui
- 饿了吗 - ElementUI
{
"presets": [
["es2015", { "modules": false }], "stage-0"
],
“plugins”: [
[“component”, [
{
“libraryName”: “mint-ui”,
“style”: true
},
{
“libraryName”: “element-ui”,
“styleLibraryName”: “theme-default”
}
]]
]
}复制代码
Webpack 发布项目
- webpack 打包的各种坑
-
webpack 命令能够生成dist目录到磁盘中，最终，把打包后的代码，部署服务器中去
-
webpack-dev-server 仅是在内存中生成的文件，并没有写到磁盘中，所以，只能在开发期间使用
创建项目发布配置文件
- 开发期间配置文件：
webpack.config.js
- 项目发布配置文件：
webpack.prod.js （文件名称非固定 production 生产环境）
- 命令：
webpack --config webpack.prod.js 指定配置文件名称运行webpack
- 参数：
--display-error-details 用于显示webpack打包的错误信息
/* package.json */
“scripts”: {
“build”: “webpack --config webpack.prod.js”
}复制代码
1 在项目根目录中创建 webpack.prod.js 文件
2 在 package.json 中, 配置一个 scripts
3 在 终端中 通过 npm run build 对项目进行打包复制代码
打包处理过程
1 删除掉 devServer 相关的配置项
2 将图片和字体文件输出到指定的文件夹中
3 自动删除dist目录
4 分离第三方包（将使用的vue等第三方包抽离到 vender.js 中）
5 压缩混淆JS 以及 指定生成环境
6 抽取和压缩CSS文件
7 压缩HTML页面
8 配合vue的异步组件，实现按需加载功能复制代码
处理图片路径
- 注意：如果
limit小于比图片大，那么图片将被转化为base64编码格式
- name参数介绍
/* webpack.prod.js */
// 处理URL路径的loader
{
test: /.(jpg|png|gif|bmp|jpeg)$/,
use: {
loader: ‘url-loader’,
options: {
limit: 8192,
name: ‘images/[hash:7].[ext]’ // 作用：将图片输出到images文件夹中，文件名采用7位的哈希值（MD5），并且保持原来的图片文件扩展名
// name：指定文件输出路径和输出文件命令规则
// [hash:7]：表示使用7位哈希值代表文件名称
// [ext]：表示保持文件原有后缀名
// name: 'imgs/img-[hash:7].[ext]'
}
}
},复制代码
自动删除dist目录
- 安装：
npm i -D clean-webpack-plugin
- 作用: 每次打包之前, 删除上一次打包的dist目录
/* webpack.prod.js */
const cleanWebpackPlugin = require('clean-webpack-plugin')
plugins: [
// 创建一个删除文件夹的插件，删除dist目录
new cleanWebpackPlugin([’./dist’])
]复制代码
分离第三方包
/* webpack.prod.js */
// 1 入口 – 打包文件的入口
entry: {
// 项目代码入口
app: path.join(__dirname, ‘./src/js/main.js’),
// 第三方包入口
vendor: [‘vue’, ‘vue-router’, ‘axios’]
},
output: {
// 2 修改输出文件路径和命名规则
filename: ‘js/[name].[chunkhash].js’,
},
plugins: [
// 3 抽离第三方包
new webpack.optimize.CommonsChunkPlugin({
// 将 entry 中指定的 [‘vue’, ‘vue-router’, ‘axios’] 打包到名为 vendor 的js文件中
// 第三方包入口名称，对应 entry 中的 vendor 属性
name: ‘vendor’,
}),
]复制代码
压缩混淆JS
plugins: [
// 优化代码
// https://github.com/webpack-contrib/uglifyjs-webpack-plugin/tree/v0.4.6
new webpack.optimize.UglifyJsPlugin({
// 压缩
compress: {
// 移除警告
warnings: false
}
}),
// 指定环境为生产环境：vue会根据这一项启用压缩后的vue文件
new webpack.DefinePlugin({
‘process.env’: {
‘NODE_ENV’: JSON.stringify(‘production’)
}
})
]复制代码
抽取和压缩CSS文件
- 安装：抽离
npm i -D extract-text-webpack-plugin
- 安装：压缩
npm i -D optimize-css-assets-webpack-plugin
- webpack 抽离CSS文档
- 压缩抽离后的CSS
压缩和抽离CSS报错的说明：
Error processing file: css/style.css
postcss-svgo: Error in parsing SVG: Unquoted attribute value
原因：压缩和抽离CSS的插件中只允许 SVG 使用双引号复制代码
/* webpack.prod.js */
// 分离 css 到独立的文件中
const ExtractTextPlugin = require("extract-text-webpack-plugin");
// 压缩 css 资源文件
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin')
// bug描述: 生成后面的css文件中图片路径错误，打开页面找不到图片
// 解决：google搜索 webpack css loader 样式图片路径
output: {
// ...
// https://doc.webpack-china.org/configuration/output/#output-publicpath
// 设置公共路径
publicPath: '/',
},
module: {
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: "css-loader"
})
},
{
test: /\.scss$/,
use: ExtractTextPlugin.extract({
fallback: "style-loader",
use: ['css-loader', 'sass-loader']
})
},
]
},
plugins: [
// 通过插件抽离 css (参数)
new ExtractTextPlugin("css/style.css"),
// 抽离css 的辅助压缩插件
new OptimizeCssAssetsPlugin()
]复制代码
压缩HTML页面
new htmlWebpackPlugin({
// 模板页面
template: path.join(__dirname, './index.html'),
// 压缩HTML
minify: {
// 移除空白
collapseWhitespace: true,
// 移除注释
removeComments: true,
// 移除属性中的双引号
removeAttributeQuotes: true
}
}),复制代码
vue配合webpack实现路由按需加载
- Vue 路由懒加载
- Vue 异步组件
- Vue 组件懒加载浅析
- [Vue.js路由懒加载[译]](www.jianshu.com/p/abb0...
步骤
// 方式一: require.ensure()
const NewsList = r => require.ensure([], () => r(require('../components/news/newslist.vue')), 'news')
// 方式二: import() – 推荐
// 注意：/* webpackChunkName: “newsinfo” / 是一个特殊的语法，表示生成js文件的名称
const NewsInfo = () => import(/ webpackChunkName: “newsinfo” */ ‘…/components/news/newsinfo.vue’)复制代码
output: {
// ------添加 chunkFilename, 指定输出js文件的名称------
chunkFilename: 'js/[name].[chunkhash].js',
},复制代码
