webpack
1.介绍
- “Webpack 是一个开源的前端打包工具。Webpack 提供了前端开发缺乏的模块化开发方式，将各种静态资源视为模块，并从它生成优化过的代码;
- Webpack的工作方式是把你的项目当做一个整体，通过一个给定的主文件（如：index.js），将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
- webpack基于node.js开发出来的一个前端工具;gulp是基于task任务的；webpack是基于整个项目进行构建的；
JS
.js .jsx .coffee .ts(TypeScript)
CSS
.css .less .sass .scss
Images
.jpg .png .gif .bmp
字体文件
.svg .ttf .eot .woff .woff2
模板文件
.ejs .jade .vue(这是在webpack中定义组件的方式，推荐这么用)
在网页中会引用静态资源,网页中引入的静态资源多，网页加载速度慢，要处理错综复杂的依赖关系
- 合并、压缩、精灵图、图片的Base64编码
- 可以使用requreJs、也可以使用webpack可以解决各个包之间的复杂关系
2.安装
## webpack安装的两种方式:
npm i webpack -g ## 1.全局安装
npm i webpack --save-dev ## 2.安装到项目依赖中，在项目跟目录中运行
3.使用
3.1 初始化
建立项目：
npm init -y ## 生成package.json文件
webpack ## 要打包的文件的路径 打包好的输出文件的路径
webpack .\src\main.js .\dist\bundle.js
3.2 webpack.config.js 配置文件
const path = require('path');
module.exports = {
// 在配置文件中，需要手动指定入口和出口
entry: path.join(_dirname, './src/main.js'), // 入口，要使用webpack打包哪个文件
output: { // 输出文件相关的配置
path.join(_dirname, './dist),
filename: 'bundle.js // 指定输出的文件的名称
}
}
3.3 webpack-dev-server 这个工具，来实现自动打包编译的功能
npm i webpack-dev-server -D
webpack-dev-server // 这个工具，如果需要正常运行，要求在本地项目中，安装webpack cnpm i webpack -D
自动打包编译
方法一：
// package.json
// --open自动打开
// --port端口号
// --contentBase 打开根页面
// --hot局部更新减少不必要的代码更新 页面不刷新
"scripts": {
"dev": "webpack-dev-server --open --port 8080 --contentBase src --hot"
}
方法二：
// package.json
"scripts": {
"dev": "webpack-dev-server"
}
const path = require('path');
// 启用热更新的第2步
const webpack = require('webpack');
module.exports = {
// 在配置文件中，需要手动指定入口和出口
entry: path.join(_dirname, './src/main.js'), // 入口，要使用webpack打包哪个文件
output: { // 输出文件相关的配置
path.join(_dirname, './dist),
filename: 'bundle.js // 指定输出的文件的名称
},
devServer: { // 这是配置dev-server命令参数的第二种形式，相对来说，这种方式麻烦一些
open: true, // 自动打开浏览器
port: 8080, // 设置启动时候的允许端口
contentBase: 'src', // 指定托管的跟目录
hot: true // 启用热更新的第1步
},
plugins: [ // 配置插件的节点
new webpack.hotModuleReplacePlugin() // new一个热更新的模块对象，使用热更新的第3步
]
}
3.4 html-webpack-plugin
以上 bundle.js引用是磁盘中的，当使用html-webpack-plugin之后，我们不在需要手动处理bundle.js的引用路径了,因为这个插件,已经帮我们创建一个合适的script,并且引用了正确的路径
1.自动在内存中根据指定页面生成一个内存的页面
2.自动，把打包好的bundle.js追加到页面中去
cnpm i html-webpack-plugin
const path = require('path');
// 导入在内存中生成HTML页面的插件
// 只要是插件，都要放到plugins中去
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 在配置文件中，需要手动指定入口和出口
entry: path.join(_dirname, './src/main.js'), // 入口，要使用webpack打包哪个文件
output: { // 输出文件相关的配置
path.join(_dirname, './dist),
filename: 'bundle.js // 指定输出的文件的名称
},
plugins: [ // 配置插件的节点
new webpack.hotModuleReplacePlugin(), // new一个热更新的模块对象，使用热更新的第3步
new htmlWebpackPlugin({ // 创建一个在内存中生成HTML页面的插件
template: path.join(_dirname, './src/index.html'), // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
filename: 'index.html' // 指定生成页面的名称
})
]
}
注意：webpack处理第三方文件类型的过程；
1.发现这个要处理的文件不是JS文件,然后就去配置文件中，查找有没有对应的第三方loader规则；
2.如果能找到对应的规则，就会调用对应的loader处理这种文件类型；
3.在调用loader的时候，是从后往前调用的；
4.当最后一个loader调用完毕，会把处理的结果，直接交给webpack进行打包合并，最后输出到bundle.js中去；
3.5 css处理
cnpm i style-loader css-loader -D
sass
cnpm i node-sass -D
cnpm i sass-loader -D
less
cnpm i less -D
cnpm i less-loader -D
module: { // 这个节点，用于配置所有第三方模块加载器
rules: [ // 所有第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader']}, // 配置处理.css文件的第三方loader规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 配置处理.less文件的第三方loader规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']} // 配置处理.scss文件的第三方loader规则
]
}
3.6 图片处理
默认情况下，webpack无法处理css文件中的url地址，无论是图片还是字体
// limit给定的值，是图片的大小，单位是byte，如果我们引用的图片，大于或者等于给定的limit值，
则不会被转为base64格式的字符串，如果图片小于给定的limit值，则会被转为base64的字符串
超过limit限制 name=[name].[ext] 指定原图片名称 重名的图片会被覆盖之前的图片
&name=[hash:32]-[name].[ext] 生成不同的图片名称
cnpm i url-loader-D
module: { // 这个节点，用于配置所有第三方模块加载器
rules: [ // 所有第三方模块的匹配规则
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=大小&name=[hash:32]-[name].[ext]'}, // 配置处理图片路径的第三方loader规则
]
}
3.7 字体图标
cnpm i bootstrap -S
module: { // 这个节点，用于配置所有第三方模块加载器
rules: [ // 所有第三方模块的匹配规则
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}, // 配置字体文件的loader
]
}
3.8 es6处理
在webpack中，默认只能处理一部分ES6的新语法，一些更高级的ES6语法或者ES7语法，webpack是处理不了的；
这时候就需要借助第三方的loader，来帮助webpack处理这些高级的语法，当第三方loader把高级语法
转为低级的语法之后，会把结果交给webpack去打包到bundle.js中
通过 Babel，可以帮我们将高级的语法转成低级的语法。
1.在webpack中，可以运行如下两套命令，安装两套包，去安装Babel相关的loader功能；
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
或者
cnpm i babel-preset-env babel-preset-stage-0 -D
2.打开webpack的配置文件，在module节点下的rules数组中，添加一个新的匹配规则：
{test: /\.js$/， use: 'babel-loader', exclude: /node_modules/}
注意：在配置Babel的loader规则的时候，必须把node_modules目录，通过exclude选项排除掉
3.在项目的根目录中，新建一个叫做.babelrc的Babel配置文件，这个配置文件，属于JSON格式，所以，在写.babelrc配置的时候，必须符合JSON语法规范；不能写注释，字符串必须用双引号
module: { // 这个节点，用于配置所有第三方模块加载器
rules: [ // 所有第三方模块的匹配规则
{test: /\.js$/， use: 'babel-loader', exclude: /node_modules/} // 配置Babel来转换高级ES语法
]
}
在.babelrc写如下配置 presets语法
{
"presets": ["env","stage-0"],
"plugins": ["transform-runtime"]
}
目前，我们安装的babel-preset-env，是比较新的ES语法，之前，我们安装的是babel-preset-es2015，
现在，出了一个更新的语法插件，叫做babel-preset-env,它包含了所有的和es***相关的语法
如何在webpack构建的项目中，使用vue解析开发
如何在普通网页中使用vue；
1.使用script标签，引入vue的包
2.在index页面中，创建一个id为app div容器
3.通过new Vue得到一个vm的实例
3.9 在webpack中使用vue
在webpack中，使用import Vue from ‘vue’;导入的只提供了runtime-only的方式，并没有提供像网页中那样的使用方式
cnpm i vue -S
import Vue from 'vue'; // 导入的包
// 包的查找规则：
// 1.找项目根目录有没有node_modules的文件夹
// 2.在node_modules中根据包名，找对应的vue文件夹；
// 3.在vue文件夹中，找一个叫做package.json的包配置文件
// 4.在package.json文件中，查找一个main属性【main属性指定了这个包在被加载时候的入口文件】
var vm = new Vue({
el: '#app", // 挂载节点
data: {
}
});
<div id="app">
</div>
import Vue from 'vue'; // 导入的包不能正常使用
// 解决方法：
import vue from '../node_modules/vue/dist/vue.js'; //方法一:
resolve: { //方法二：
alias: { // 设置vue被导入时候的包路径
"vue$": "vue/dist/vue.js"
}
}
## 默认，webpack无法打包.vue文件，需要安装相关的第三方插件loader；
cnpm i vue-laoder vue-template-complier -D
// 在配置文件中新增loader配置
{
test: /\.vue$/, use: 'vue-laoder'
}
const path = require('path');
// 启用热更新的第2步
const webpack = require('webpack');
// 导入在内存中生成HTML页面的插件
// 只要是插件，都要放到plugins中去
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 在配置文件中，需要手动指定入口和出口
entry: path.join(_dirname, './src/main.js'), // 入口，要使用webpack打包哪个文件
output: { // 输出文件相关的配置
path.join(_dirname, './dist),
filename: 'bundle.js // 指定输出的文件的名称
},
devServer: { // 这是配置dev-server命令参数的第二种形式，相对来说，这种方式麻烦一些
open: true, // 自动打开浏览器
port: 8080, // 设置启动时候的允许端口
contentBase: 'src', // 指定托管的跟目录
hot: true // 启用热更新的第1步
},
plugins: [ // 配置插件的节点
new webpack.hotModuleReplacePlugin(), // new一个热更新的模块对象，使用热更新的第3步
new htmlWebpackPlgin({ // 创建一个在内存中生成HTML页面的插件
template: path.join(_dirname, './src/index.html'), // 指定模板页面，将来会根据指定的页面路径，去生成内存中的页面
filename: 'index.html' // 指定生成页面的名称
})
],
module: { // 这个节点，用于配置所有第三方模块加载器
rules: [ // 所有第三方模块的匹配规则
{ test: /\.css$/, use: ['style-loader', 'css-loader']}, // 配置处理.css文件的第三方loader规则
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader']}, // 配置处理.less文件的第三方loader规则
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader']}, // 配置处理.scss文件的第三方loader规则
{ test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=大小&name=[hash:32]-[name].[ext]'}, // 配置处理图片路径的第三方loader规则
{ test: /\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader'}, // 配置字体文件的loader
{test: /\.js$/， use: 'babel-loader', exclude: /node_modules/}, // 配置Babel来转换高级ES语法
{test: /\.vue$/, use: 'vue-laoder'}
]
},
resolve: {
alias: { // 设置vue被导入时候的包路径
"vue$": "vue/dist/vue.js"
}
}
}
总结梳理：webpack中如何使用vue
// 总结梳理：webpack中如何使用vue
// 1.安装vue包：
cnpm i vue -S;
// 2.由于在webpack中，推荐使用.vue这个组件模板文件定义组件，所以需要安装能解析这种文件的loader
cnpm i vue-loader vue-template-compiler -D
// 3.在main.js中，导入vue模板，
import Vue from 'vue';
// 4.定义一个.vue结尾的组件，其中，组件有三部分组成: template script style
// 5.使用导入这个组件
import login from './login.vue'
// 6.创建vm实例
var vm = new Vue({el: '#app', render: c=> c(login)});
// 7.在页面中创建一个id为app的div元素，作为我们vm实例要控制的区域；
// 组件中使用
<template>
<div></div>
</template>
export default {
data() {
return {}
}
}
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
