webpack的基本使用
使用npm包管理工具
npm init # 一路回车
创建目录
mkdir src
在src下创建index.html和main.js
touch src/index.html src/main.js
在main.js中输入一些代码
console.log("ok");
在根目录创建配置文件 webpack.config.js
touch webpack.config.js
在 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-dev-server
cnpm i webpack-dev-server -D
cnpm i webpack -D # 提示缺少这个库,需要本地安半
在package.json中的 scripts 属性中添加如下内容
"dev": "webpack-dev-server --open --port 3000 --contentBase src --hot"
执行命令
npm run dev # 报错提示缺少 webpack-cli
cnpm i webpack-cli -D
# 再次运行
npm run dev
浏览器中查看源码,发并没有引用 bundle.js
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
</body>
</html>
在内存中生成页面
安装插件 html-webpack-plugin
cnpm i html-webpack-plugin -D
在webpack.config.js中
// 引入插件
const htmlWebpackPlugin=require('html-webpack-plugin')
// 加入与entry平级的属性
plugins:[
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: "index.html"
}), // 在内存中生成网页
],
完整内容如下
const path = require('path')
const htmlWebpackPlugin=require('html-webpack-plugin')
module.exports={
entry: path.join(__dirname, './src/main.js'),
output:{
path: path.join(__dirname, './dist'),
filename: 'bundle.js',
},
plugins:[
new htmlWebpackPlugin({
template: path.join(__dirname, './src/index.html'),
filename: "index.html"
}),
],
}
重新编译
npm run dev
网页中已使用了bundle.js文件
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script></body>
</html>
安装jquery
cnpm i jquery -D
在main.js中引入jquery
import $ from 'jquery'
在incex.html中加入一些元素,做测试
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
<li>这是第6个li</li>
<li>这是第7个li</li>
<li>这是第8个li</li>
<li>这是第9个li</li>
<li>这是第10个li</li>
</ul>
在main.js中加入如下代码
$(function(){
$("li:odd").css("backgroundColor","yellow");
$("li:even").css("backgroundColor","red");
})
网面中的样式也发生了改变
使用样式(.css)文件
安装加载器
cnpm i css-loader style-loader -D
编写.css文件匹配规则(webpack.config.js)
module:{
rules:[ // 所有第三方加载器,匹配规则
{test: /\.css$/, use:['style-loader', 'css-loader'] },
]
}
新建文件 src/css/index.html 并输入如下内容
li{
list-style: none;
}
在main.js中引入 index.js
import './css/index.css'
编译运行,查看结果
npm run dev
使用sass文件
安装加载器
cnpm i sass-loader -D
# 提示缺少 node-sass sass fibers
cnpm i node-sass sass fibers -D # 安装
使用配置加载器
{test:/\.scss$/, use:['style-loader', 'css-loader' ,'sass-loader']},
测试
添加index.scss文件
* {
font-size: 24px;
}
main.js中引入
import './css/index.scss'
使用 less文件
安装加载器
cnpm i less-loader -D
使用配置加载器
{test:/\.scss$/, use:['style-loader', 'css-loader' ,'sass-loader']},
url-loader
CSS使用图片
.box{
width: 500px;
height: 300px;
background: url(../images/1.jpg);
}
报错
You may need an appropriate loader to handle this file type, currently no loaders are configured to process this file. S
ee https://webpack.js.org/concepts#loaders
(Source code omitted for this binary file)
@ ./src/css/index.css (./node_modules/[email protected]@css-loader/dist/cjs.js!./src/css/index.css) 4:36-62
@ ./src/css/index.css
@ ./src/main.js
使用url-loader
file-loadercnpm url-loader -D
配置
{test:/\.(jpg|gif|png|jpeg|bmp)$/, use: 'url-loader' },
图片使用 base64编码
传参配置
{test:/\.(jpg|gif|png|jpeg|bmp)$/, use: 'url-loader?limit=7168&name=[hash:8]-[name].[ext]' },
// limit 给定的值是图片的大小单位是byte, 如果引用的图片大小等于limit就不会被转成base64编码
// name=[name].[ext]' 保留原图名字
// [hash:8] 哈希值前8位
使用字体
cnpm i [email protected] -D
引入bootstrap.css
import 'bootstrap/dist/css/bootstrap.css'
配置
{test:/\.(eot|ttf|svg|woff|woff2)$/, use: 'url-loader' }, // 处理字体文件
测试
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
全部安装
cnpm i
支持ES6代码
class Persion {
static info={name: 'zs', age:20} // 报错
}
第三方loader
第一套
cnpm i babel-core babel-loader babel-plugin-transform-runtime -D
第二套
cnpm i babel-preset-env babel-preset-stage-0 -D
添加配置
{test:/\.js$/, use: 'babel-loader', exclude: /node_modules/ }, // ES6支持
项目根目录添加 .babelrc文件 json格式
{
"presets":["env", "stage-0"],
"plugins":["transform-runtime"]
}
安装vue
cnpm i vue -S
vue-loader
cnpm i vue-loader vue-template-compiler -D
//插件导入
const VueLoaderPlugin = require('vue-loader/lib/plugin')
...
new VueLoaderPlugin(),
...
{test:/\.vue$/, use: 'vue-loader' }, // .vue
安装vue-router
cnpm i vue-router -S
导入
import VueRouter from 'vue-router'
Vue.use(VueRouter) // 安装
模板
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div id="app">
</div>
</body>
</html>
main.js
import Vue from 'vue'
import VueRouter from 'vue-router'
import acc from "./Account.vue"
import gsl from "./goodslist.vue"
Vue.use(VueRouter)
var router = new VueRouter({
routes:[
// account goodslist
{path:'/', redirect:"/account"},
{path:'/account', component:acc},
{path:'/goodslist', component:gsl},
]
})
import app from "./app.vue"
var vm = new Vue({
el:'#app',
data:{
msg: '123'
},
render:c=>c(app),
router: router,
})
组件
<template>
<div>
<div>
<router-link to="/account">Account</router-link>
<router-link to="/goodslist">goodslist</router-link>
</div>
<router-view></router-view>
</div>
</template>
<script>
export default{
data()
{
return {};
},
methods:{
}
}
</script>
<style>
</style>
使用 Mint UI
安装
cnpm i mint-ui -S
全部导入
import MintUI from 'mint-ui'
import 'mint-ui/lib/style.css'
Vue.use(MintUI)
按需导入
cnpm install babel-plugin-component -D
然后,将 .babelrc 修改为:
{
"presets": [
["es2015", { "modules": false }]
],
"plugins": [["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
完整代码如下:
{
"presets":["env", "stage-0"],
"plugins":["transform-runtime", ["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
按需导入
import { Button } from 'mint-ui'
Vue.component(Button.name, Button)
MUI(代码片段)
需要手动下载
import './lib/mui/dist/css/mui.min.css'
[
[“es2015”, { “modules”: false }]
],
“plugins”: [[“component”, [
{
“libraryName”: “mint-ui”,
“style”: true
}
]]]
}
完整代码如下:
```json
{
"presets":["env", "stage-0"],
"plugins":["transform-runtime", ["component", [
{
"libraryName": "mint-ui",
"style": true
}
]]]
}
按需导入
import { Button } from 'mint-ui'
Vue.component(Button.name, Button)
MUI(代码片段)
需要手动下载
import './lib/mui/dist/css/mui.min.css'