视频资源来自：b站coderwhy王红元老师——最全最新Vue、Vuejs教程，从入门到精通
文章仅为个人观看视频后的学习心得笔记，用于个人查看和记录保存。文中定有疏漏错误之处，恳请指正。
webpack详解
认识webpack
什么是Webpack
前端模块化
和grunt/gulp的对比
面试可能会问
grunt/gulp的核心是Task
如果工程模块依赖非常简单，甚至是没有用到模块化的概念。只需要进行简单的合并、压缩，就使用grunt/gulp即可。
如果整个项目使用了模块化管理，而且相互依赖非常强，使用webpack[强调模块化开发管理]打包。
webpack的安装
node 10.13.8
webpack的起步
src：源码
dist：distribution打包好了的，发布
Terminal:
D:\study\vue\临时\LearnVuejs04-v2\01-webpack的使用\01-webpack的起步>webpack ./src/main.js ./dist/bundle.js
把main.js打包成bundle.js
//使用commomjs的模块化规范
const {add,mul} = require('./mathUtils')
console.log(add(20,30));
//使用ES6的模块化的规范
import {name,age,height} from "./info"
console.log(name);
webpack的配置
入口和出口
创建webpack.config.js
const path = require('path')
//这个时候控制台按npm init
module.exports = {
entry: './src/main.js',
output: {
//动态获取路径
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
}
//控制台敲 webpack，如果文件名不是上面的，那webpack后面还要跟config的文件名
const path = require('path')——node自带的包，得出当前路径
path.resolve()——连接两个路径
__dirname——node带的，表示当前路径
npm init——对其初始化
D:\study\vue\临时\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>
npm init
This utility will walk you through creating a package.json file.
It only covers the most common items, and tries to guess sensible defaults.See npm help json for definitive documentation on these fields
and exactly what they do.Use npm install
afterwards to install a package and
save it as a dependency in the package.json file.Press ^C at any time to quit.
package name: (02-webpack的配置)
Sorry, name can only contain URL-friendly characters.
package name: (02-webpack的配置)meetwebpack
version: (1.0.0)
description:
entry point: (webpack.config.js)index.js
test command:
git repository:
keywords:
author:
license: (ISC)
About to write to D:\study\vue\临时\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置\package.json:{
"name": "meetwebpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo "Error: no test specified" && exit 1"
},
"author": "",
"license": "ISC"
}Is this OK? (yes)
D:\study\vue\临时\LearnVuejs04-v2\01-webpack的使用\02-webpack的配置>
build是自己取的，npm run build相当于执行webpack
↑会先找本地，找不到再找全局
局部安装webpack
npm install [email protected] --save-dev——本地安装webpack（开发者模式）
如果在终端[webstorm或者cmd]里敲webpack，始终是找全局的。
但是npm run build和node_modules/.bin/webpack※尝试失败※优先用本地的
css-loader的使用
什么是louder
将ES6转成ES5代码，将TypeScript转成ES5代码，将scss、less转成css，将.jsx、.vue文件转成js文件等等
css文件处理
安装 css-loader：npm install --save-dev [email protected]
在mian.js里添加require('./css/normal.css')。不需要传出对象，因为不会用，只是是其产生依赖，才能打包
此时的webpack.config.js
const path = require('path')
//这个时候控制台按npm init
module.exports = {
entry: './src/main.js',
output: {
//动态获取路径
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js'
},
module: {
rules: [
{
//正则表达式
test: /\.css$/i,
//webpack使用多个louder时，是从右向左读的。先处理css后style
use: ["style-loader","css-loader"],
},
],
},
}
style-loader 将模块导出的内容作为样式并添加到 DOM 中
安装：npm install --save-dev [email protected]
css-loader 只负责加载css
less文件处理
less-loader 加载并编译 LESS 文件
安装：npm install --save-dev less-loader [email protected]
图片文件的处理
安装：npm install --save-dev [email protected]
{
test: /\.(png|jpg|gif|jpeg)$/,
use: [
{
loader: 'url-loader',
options: {
//当加载的图片小于limit时，会将图片编译成base64字符串格式
//如果limit太大，浏览器加载的图片也会那么多，加载时间长
limit: 13000,
//不加中括号文件名字就叫name了
name: 'img/[name].[hash:8].[ext]'
}
}
]
}
如果图片超过limit，则需要用file-loader。
对于需要打包的大图片：
webpack.config.js 里的 module.exports里的方法
output: {
//动态获取路径
path: path.resolve(__dirname,'dist'),
filename: 'bundle.js',
//只要是url开头的，地址前默认加上↓
publicPath: 'dist/'
},
打包的图片自动命名为一个32位的hash值[为了防止重复]
太长一串了！！于是：自定义修改打包后的图片名，在option里添加
name: 'img/[name].[hash:8].[ext]'——所有打包的图片都放在dist的img文件夹中。文件命名为：文件原名.截取8位hash值.文件原后缀名
Babel的使用
将ES6的语法转成ES5[没有const]
安装：npm install --save-dev babel-loader@7 babel-core babel-preset-es2015
配置：
{
test: /\.js$/,
//exclude:排除
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
webpack中配置Vue
引入vue.js
引用：import Vue from 'vue' 为什么可以这样写？↓
没有写路径时，就去model里找。model里边默认导出的就是Vue：export default Vue
下载：npm install [email protected] --save
-dev 表示开发时依赖，因为项目中会使用Vue.js所以不加dev
报错：
runtime-only ：代码中，不可以有任何的templa
runtime-complier ： 代码中，可以有template，因为有complier可以用于编译template
alias：别名 廖雪峰：git教程
webpack配置
resolve: {
//alias：别名
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
指定方式找文件夹，否则就默认找vue.runtime.js了。指定找vue.esm.js
$表示结束
SPA(simple Page web application) -> vue-router(前端路由)
el和template区别
template会替换el
使用.vue文件时
npm install [email protected] [email protected] --save-dev
省略后缀名：webpack配置的resolve解决问题的
extensions: ['.js','.css','.vue']
plugin的使用
plugin：框架/插件
react -> MIT
添加版权的Plugin
webpack配置文件：
plugins:[
new webpack.BannerPlugin('最终版权归YY所有')
]
打包html的plugin
将index.html文件打包到dist文件夹
下载：npm install [email protected] --save-dev
引用：const HtmlWebpackPlugin = require('html-webpack-plugin')
在plugins里
new HtmlWebpackPlugin({
template: 'index.html'
})
使得每次新生成的html文件里自动引入原html的
js压缩的Plugin
打包的时候才用
下载：npm install [email protected] --save-dev
然后生成的js代码会很丑，，挤在一起
搭建本地服务器
存储在内存里，npm run build后才会存储到磁盘里
下载：npm install --save-dev [email protected]
配置：开发的时候才用
devServer: {
contentBase: './dist',
inline: true
}
json增加描述"dev": "webpack-dev-server"
cmd：npm run dev
在cmd点端口号进入
终止批处理操作：ctrl+c
webpack配置的分离
公共环境、生产环境、开发环境分离
公共环境：就是之前配置文件的内容，去除了开发环境、生产环境的部分。base.config.js
开发环境：dev.config.js
/*开发环境，添加对公共环境的依赖*/
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
devServer: {
contentBase: './dist',
inline: true
}
})
生产环境：prod.config.js
/*生产环境，添加对公共环境的依赖*/
const UglifyJSPlugin = require('uglifyjs-webpack-plugin')
const webpackMerge = require('webpack-merge')
const baseConfig = require('./base.config')
module.exports = webpackMerge(baseConfig,{
plugins:[
new UglifyJSPlugin()
],
})
指令修改：
"build": "webpack --config ./build/prod.config.js",
"dev": "webpack-dev-server --open --config ./build/dev.config.js"
总目录：
总目录：
邂逅Vuejs
Vue基础语法
组件化开发
前端模块化
webpack详解
Vue CLI详解
vue-router
Promise的使用
Vuex详解
网络模块封装
项目实战