是前端的一个项目构建工具,基于nodejs开发出来的
安装的两种方式:
cnpm i webpack -g 全局安装
cnpm i webpack -D 安装到项目依赖中
作用:①能够处理js文件的相互依赖关系②能够处理js兼容问题,把高级的浏览器不能识别的语法转为低级的,浏览器能正常识别的语法
用法: webpack ./src/msin.jd ./dist/bundle.js 前者转换为后者
webpack配置文件:webpack ./src/msin.jd ./dist/bundle.js省略,直接 输入webpack就会自行打包
继续简化:以保存就自行打包:
cnpm i webpack-dev-server -D
在package.json里面的scripts里面添加:
--open自动打开浏览器
--port 3000 设置端口
--contentBase src 设置默认打开src文件
--hot 设置页面不刷新,只更新修改的部分
“dev”: “webpack-dev-server --open --port 3000 --contentBase src --hot”
保存完直接输入:npm run dev
webpack.config.js配置文件:
const path = require('path')
module.exports = {
//指定入口文件
entry: path.join(__dirname, './src/main.js'),
// 指定输出文件
output: {
//指定输出文件路径
path: path.join(__dirname, './dist'),
//指定输出文件名
filename: 'bundle.js'
}
// 当在控制台输入webpack时,webpack做了以下几步:
// 首先它发现没有通过命令的形式指定入口和出口
// 然后去找webpack.config.js文件
//将文件按照这个配置文件进行打包
}
main.js
// 项目的入口js文件
// 1、导入jquery
//es6中导入其他模块的方式,浏览器不能识别,需要webpack
import $ from 'jquery'
$(function () {
$('li:odd').css('backgroundColor', 'lightblue')
$('li:even').css('backgroundColor', function () {
return '#' + 'D97634'
})
})
webpack打包好的内容没有放到根目录dist里面,而是放到根目录下的内存中
在页面中引入/bundle.js就行了,不引也行,到后面它自己会引
将html文件也放入内存中的插件:
第二个作用:将bundle.js自动追加到的页面中去
html-webpack-plugin将html文件也放入内存中:
安装:
cnpm i html-webpack-plugin -D
使用时需要在webpack.config.js里面导入
var htmlWebpackPlugin = require(‘html-webpack-plugin’)
再在配置节点中:
plugins: [
new htmlWebpackPlugin({
// 指定模板文件路径
template: path.join(__dirname, './src/index.html'),
// 设置生成的内存页面名称
filename: 'index.html'
})
],
css样式main.js中的导入
import ‘./src/css/index.css’
但是webpack默认只能打包js文件,不能打包非js文件,如果需要打包css文件,需要手动下载第三方的加载器
cnpm i css-loader style-loader -D
再打开webpack.config.js文件,在配置插件的节点中加入module对象,里面有个属性rules,它是一个数组,里面存放了所有第三方插件的匹配和处理规则
配置处理less文件:
在main.js中导入:
require ‘./less/index.less’
和css文件一样要装一个依赖项,和less
cnpm i less loader less -D
回到webpack-config.js添加配置项
配置处理sass文件:
在main.js中导入:
require ‘./sass/index.scss’
cnpm i sass-loader -D
cnpm i node-sass -D
webpack无法处理css文件中的url地址相关的内容,要安装一个依赖项
cnpm i url-loader -D
cnpm i file-loader -D
新建匹配规则:
use里面是可以传参的:
处理字体文件的loader:
混入url-loader一样,不用下载了,直接载入配置项就行
es6语法处理babel-loader:
webpack只能处理一部分的es6语法,一些高级的语法它处理不了,需要第三方的loader
最新的babel已经不是这样配置的了但大致一样
详情(靠谱):
babel-loader配置
在webpack构建的项目中使用vue开发
把vue包安装为项目运行依赖
npm i vue -S
在main.js里面里面引入vue:
import Vue from ‘vue’
这种引入方式引入的包不全面,需要在配置文件里加个配置项:
在根目录下创建login.vue文件
login.vue中向外暴露成员的方法:
在main.js里面引入
import 组件名 from ‘./login.vue’
默认webpack不能打包vue文件,需要第三方的loader:
cnpm i vue-loader vue-template-compiler -D
装完之后要加一个配置项:
{ test:/\.vue$/, use: ‘vue-loader’ }
再引入vue-loader里面的plugin
在plugins里面添加配置项(第二个)
在main.js的实例里面添加这个组件:
只能通过render函数实现
结合webpack使用vue-router
安装:
cnpm i vue-router -S
创建几个模板文件并导入:
main.js:
console.log('ok')
import './css/index.css'
import './css/index.scss'
import './css/index.less'
import Vue from 'vue'
// 导入Account组件
import account from './main/Account.vue'
import goodList from './main/GoodList.vue'
import app from './app.vue'
import login from './subcom/login.vue'
import register from './subcom/register.vue'
//1、 导入vue-router包
import VueRouter from 'vue-router'
//2、 手动安装VueRouter
Vue.use(VueRouter)
// 3、创建路由对象
var router = new VueRouter({
routes: [
{
path: '/account',
component: account,
children: [
{
path: 'login',
component: login
},
{
path: 'register',
component: register
}
]
},
{
path: '/goodList', component: goodList
},
]
})
var vm = new Vue({
el: '#app',
data: {},
// 在webpack中如果要通过vue把组件渲染到页面中去,render函数可以实现
render: function (createElement) {
return createElement(app)
},
router//4、将路由对象挂载到实例对象上
})
// 注意: App 这个组件,是通过 VM 实例的 render 函数,渲染出来的, render 函数如果要渲染 组件, 渲染出来的组件,只能放到 el: '#app' 所指定的 元素中;
// Account 和 GoodsList 组件, 是通过 路由匹配监听到的,所以, 这两个组件,只能展示到 属于 路由的 <router-view></router-view> 中去;
webpack.config.js:
const path = require('path')
// 在内存中根据指定的模板页面,生成一份内存中的首页,同时自动把打包好的bundle
// 注入到页面底部,需要在导出的对象中,挂载一个plugin节点
var htmlWebpackPlugin = require('html-webpack-plugin')
// 引入vue-loader里面的plugin
const VueLoaderPlugin =require('vue-loader/lib/plugin');
// 当以命令形式运行webpack或webpack-dev-server的时候,工具会发现,我们并没有
// 提供要打包的文件的入口和出口文件,此时它会检查项目的根目录中的配置文件,并读取这个文件
// 就拿到了导出的这个配置对象,然后根据这个对象,进行打包构建
module.exports = {
entry: path.join(__dirname, './src/main.js'),
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js',
},
// 所有webpack插件配置节点
plugins: [
new htmlWebpackPlugin({
// 指定模板文件路径
template: path.join(__dirname, './src/index.html'),
// 设置生成的内存页面名称
filename: 'index.html'
}),
new VueLoaderPlugin()
],
//配置所有第三方loader模块
module: {
// 第三方模块的匹配规则
rules: [
// 处理css文件的loader
{
test: /\.css$/, use: ['style-loader', 'css-loader']
},
{
test: /\.less$/, use: ['style-loader', 'css-loader','less-loader']
},
{
test: /\.scss$/, use: ['style-loader', 'css-loader','sass-loader']
},
{
// 处理图片路径的loader,只有一个url-loader
test: /\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=5928&name=[hash:8]-[name].[ext]'
// limit给定的值是图片的大小,单位是byte,如果图片的大小大于等于给定的limit值,
// 就不会被转成base64格式的字符串,反之会
// 要给每个图片取一个不同的名字,不然后者会覆盖前者
},
// 处理字体图标的loader
{
test: /\.(svg|eot|woff|woff2|ttf)$/, use: 'url-loader'
},
{
// 配置babel来转换高级es6语法
test: /\.js$/, use: 'babel-loader', exclude: /node_modules/,
},
{
test:/\.vue$/, use: 'vue-loader'
}
]
},
// 设置vue被导入时包的路径
resolve: {
alias: {
"vue$": "vue/dist/vue.js"
}
}
}
html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
<!-- <script src="/bundle.js"></script> -->
</head>
<body>
<div class="box">hhhhhh</div>
</body>
</html>