webpack一步步实现实时打包打包vue打包csslessscss文件babel用法
Posted 易辰_
tags:
篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了webpack一步步实现实时打包打包vue打包csslessscss文件babel用法相关的知识，希望对你有一定的参考价值。
文章目录
webpack一步步实现打包、实时打包操作、打包css\\less\\scss文件
我们接着这篇博客，来继续学习webpack的相关操作
我先贴出来项目的目录结构：
打包图片
通过npm i url-loader file-loader -D 安装
在images、images放2张同名的图片
在index.html中，加入2行代码
<div class="box"></div>
<div class="box2"></div>
在index.scss加上如下代码
.box
width: 220px;
height: 220px;
// 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了
background: url('../images/a.jpg');
background-size: cover;
.box2
width: 250px;
height: 220px;
// 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了
background: url('../images2/a.jpg');
background-size: cover;
在webpack.config中添加如下url-loade配置、和performance
module:
rules: [
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'] ,
// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，
// 大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
test: /\\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' , // 处理 图片路径的 loader
]
,
performance:
hints: false
然后npm run dev启动，会渲染出2张图片，以下是渲染的内容：我们看到图片被重命名了
html .box, body .box
width: 220px;
height: 220px;
background: url(53a478f8-a.jpg);
background-size: cover;
html .box2, body .box2
width: 250px;
height: 220px;
background: url(4094d8ed-a.jpg);
background-size: cover;
配置bootstrap字体
首先利用npm i bootstrap@3.3.6 -S 安装bootstrap,我这里是安装的3版本的bootstrap，因为4.xx版本的bootstrap包中没有字体目录主题
布局中填入如下标签
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
然后在index.js中倒入bootstrap样式
import 'bootstrap/dist/css/bootstrap.css'
然后在webpack.config.js中进行配置
module:
rules: [
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'] ,
// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，
// 大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
test: /\\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[name].[ext]' , // 处理 图片路径的 loader
test: /\\.(ttf|eot|svg|woff|woff2)$/, use: 'url-loader' , // 处理 字体文件的 loader
]
,
babel处理高级JS语法
1.运行npm i babel-core babel-loader babel-plugin-transform-runtime --save-dev安装babel的相关loader包
2.运行npm i babel-preset-env babel-preset-stage-0 -D安装babel转换的语法
3.在webpack.config.js中添加相关loader模块，其中需要注意的是，一定要把node_modules文件夹添加到排除项：
module:
rules: [
test: /\\.js$/, use: 'babel-loader', exclude: /node_modules/ , // 配置 Babel 来转换高级的ES语法
]
,
4.在项目根目录中添加.babelrc文件，并修改这个配置文件如下：
"presets":["env","stage-0"],
"plugins": ["transform-runtime"]
5.我们在index.js中添加新特性语法
class Person
// 使用 static 关键字，可以定义静态属性
// 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
// 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
static info = name: 'safly', age: 20
6.执行npm run dev看看效果
webpack打包vue
在webpack 中尝试使用 Vue：
注意： 在 webpack 中， 使用 import Vue from ‘vue’ 导入的 Vue 构造函数，功能不完整，只提供了 runtime-only 的方式，并没有提供 像网页中那样的使用方式
回顾 包的查找规则：
// 1. 找 项目根目录中有没有 node_modules 的文件夹
// 2. 在 node_modules 中 根据包名，找对应的 vue 文件夹
// 3. 在 vue 文件夹中，找 一个叫做 package.json 的包配置文件
// 4. 在 package.json 文件中，查找 一个 main 属性【main属性指定了这个包在被加载时候，的入口文件】
1.在index.js中添加
import Vue from '../node_modules/vue/dist/vue.js'
var login =
template:'<h1>这是login组件</h1>'
var vm = new Vue(
el: '#app',
data:
msg: '123'
,
components:
login
)
在index.html中添加元素代码
<div id="app">
<p>msg</p>
<login></login>
</div>
最后保存编译会在页面上渲染输出
我们获取import Vue还可以通过配置的方式：
在webpack.config.js中添加如下的配置
resolve:
alias: // 修改 Vue 被导入时候的包的路径
"vue$": "vue/dist/vue.js"
然后在index.js中使用
import Vue from 'vue'
export说明
在 ES6中，也通过 规范的形式，规定了 ES6 中如何 导入 和 导出 模块
ES6中导入模块，使用 import 模块名称 from '模块标识符'
import '表示路径'
在 ES6 中，使用 export default 和 export 向外暴露成员：
var info =
name: ‘zs’,
age: 20
export default info
/* export default
address: ‘北京’
*/
注意： export default 向外暴露的成员，可以使用任意的变量来接收
注意： 在一个模块中，export default 只允许向外暴露1次
注意： 在一个模块中，可以同时使用 export default 和 export 向外暴露成员
export var title = '小星星'
export var content = '哈哈哈'
// 注意： 使用 export 向外暴露的成员，只能使用 的形式来接收，这种形式，叫做 【按需导出】
// 注意： export 可以向外暴露多个成员， 同时，如果某些成员，我们在 import 的时候，不需要，则可以 不在 中定义
// 注意： 使用 export 导出的成员，必须严格按照 导出时候的名称，来使用 按需接收；
// 注意： 使用 export 导出的成员，如果 就想 换个 名称来接收，可以使用 as 来起别名；
import m222, title as title123, content from './test.js'
console.log(m222)
console.log(title123 + ' --- ' + content)
webpack打包分离组件.vue文件
默认，webpack 无法打包 .vue 文件，需要安装 相关的loader：
npm i vue-loader vue-template-compiler -D
在配置文件中，新增loader哦配置项 test:/\\.vue$/, use: 'vue-loader'
为了引入.vue文件，安装完vue-loader和vue-template-compiler后，运行报错：
vue-loader was used without the corresponding plugin.Make sure to include VueLoaderPlugin in your webpack config.
百度了一下，是因为vue-loader，15的版本需要再添加plugin的配置。在webpack.config.js添加如下代码：
const VueLoaderPlugin = require('vue-loader')
module.exports =
// ...
plugins: [
new VueLoaderPlugin()
]
进一步优化，我们将模版统一封装到login.vue中
前端代码index.html布局一个标签，内置一个login组件
<div id="app">
<p>msg</p>
<login></login>
</div>
在看login.vue，有2个路由切换，
<template>
<div>
<h1>这是登录组件，使用 .vue 文件定义出来的</h1>
<router-link to="/account">Account</router-link>
<router-link to="/goodslist">Goodslist</router-link>
<router-view></router-view>
</div>
</template>
<script>
export default
data()
return
msg:"123"
,
methods:
show()
console.info("调用了login.vue中的show方法")
</script>
<style>
</style>
account.vue
<template>
<div>
<h1>这是accounts</h1>
<router-link to="/account/login">登录</router-link>
<router-link to="/account/register">注册</router-link>
<router-view></router-view>
</div>
</template>
<script>
</script>
<style scoped>
div
font-style:italic;
</style>
goods.vue
<template>
<div>
<h1>这是goods</h1>
</div>
</template>
<script>
</script>
<style>
</style>
s1.vue
<template>
<div>
<h1>s1s1s1s1s1s1s1s1s1s1s1s1s1s1s1VS</h1>
</div>
</template>
<script>
</script>
<style scoped>
div
color:red;
</style>
s2.vue
<template>
<div>
<h1>s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2s2</h1>
</div>
</template>
<script>
</script>
<style>
</style>
然后看下index.js，需要引入vue-router，然后Vue.use(VueRouter)使用，依据vue官网
import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
//倒入loginvue
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter
Vue.use(VueRouter)
import login from './login.vue'
// var login =
// template:'<h1>这是login组件</h1>'
//
import router from './router.js'
var vm = new Vue(
el: '#app',
data:
msg: '123'
,
// components:
// login
//
render: function (createElements) // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
return createElements(login)
,
router
// render: c => c(login)
)
router.js
import VueRouter from 'vue-router'
import account from './main/account.vue'
import goodslist from './main/goods.vue'
// 导入Account的两个子组件
import s1 from './sub/s1.vue'
import s2 from './sub/s2.vue'
// 3. 创建路由对象
var router = new VueRouter(
routes: [
path: '/account',
component: account,
children: [
path: 'login', component: s1 ,
path: 'register', component: s2
]
,
path: '/goodslist', component: goodslist
]
)
// 把路由对象暴露出去
export default router
然后启动测试效果如下：
总结梳理： webpack 中如何使用 vue :
1. 安装vue的包： cnpm i vue -S
2. 由于 在 webpack 中，推荐使用 .vue 这个组件模板文件定义组件，所以，需要安装 能解析这种文件的 loader cnpm i vue-loader vue-template-complier -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 实例要控制的区域；
最后贴出代码
login.vue、account.vue、goods.vue、s1.vue、s2.vue省略，上面已经列出
布局文件index.css
li
list-style: none;
index.less
ul
padding: 0;
margin: 0;
index.scss
html,body
margin: 0;
padding: 0;
li
font-size: 12px;
line-height: 30px;
.box
width: 220px;
height: 220px;
// 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了
background: url('../images/a.jpg');
background-size: cover;
.box2
width: 250px;
height: 220px;
// 默认情况下，webpack 无法 处理 CSS 文件中的 url 地址，不管是图片还是 字体库， 只要是 URL 地址，都处理不了
background: url('../images2/a.jpg');
background-size: cover;
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<div id="app">
<p>msg</p>
<login></login>
</div>
<ul>
<li>这是第1个li</li>
<li>这是第2个li</li>
<li>这是第3个li</li>
<li>这是第4个li</li>
<li>这是第5个li</li>
</ul>
<!-- <div class="box"></div>
<div class="box2"></div> -->
<span class="glyphicon glyphicon-heart" aria-hidden="true"></span>
</body>
</html>
index.js
import $ from 'jquery'
import './css/index.css'
import './css/index.less'
import './css/index.scss'
// 注意： 如果要通过路径的形式，去引入 node_modules 中相关的文件，可以直接省略 路径前面的 node_modules 这一层目录，直接写 包的名称，然后后面跟上具体的文件路径
// 不写 node_modules 这一层目录 ，默认 就会去 node_modules 中查找
import 'bootstrap/dist/css/bootstrap.css'
import Vue from 'vue'
// import Vue from '../node_modules/vue/dist/vue.js'
//倒入loginvue
import VueRouter from 'vue-router'
// 2. 手动安装 VueRouter
Vue.use(VueRouter)
import login from './login.vue'
// var login =
// template:'<h1>这是login组件</h1>'
//
import router from './router.js'
var vm = new Vue(
el: '#app',
data:
msg: '123'
,
// components:
// login
//
render: function (createElements) // 在 webpack 中，如果想要通过 vue， 把一个组件放到页面中去展示，vm 实例中的 render 函数可以实现
return createElements(login)
,
router
// render: c => c(login)
)
$(function ()
$('li:odd').css('backgroundColor', 'yellow')
$('li:even').css('backgroundColor', function ()
return '#' + 'D97634'
)
)
class Person
// 使用 static 关键字，可以定义静态属性
// 所谓的静态属性，就是 可以直接通过 类名， 直接访问的属性
// 实例属性： 只能通过类的实例，来访问的属性，叫做实例属性
static info = name: 'safly', age: 20
console.log(Person.info)
.babelrc
"presets":["env","stage-0"],
"plugins": ["transform-runtime"]
webpack.config.js
const path = require('path')
//启用热更新
const webpack = require('webpack')
var htmlWebpackPlugin = require('html-webpack-plugin');
const VueLoaderPlugin = require('vue-loader')
module.exports =
// entry:path.join(__dirname,'./src/index.js'),
// output:
// path:path.join(__dirname,'./dist'),
// filename:'index.js'
// ,
mode: 'production',
plugins: [ // 添加plugins节点配置插件
new htmlWebpackPlugin(
template: path.resolve(__dirname, 'src/index.html'),//模板路径
filename: 'index.html'//自动生成的HTML文件的名称
),
new webpack.HotModuleReplacementPlugin(),//new一个热更新
new VueLoaderPlugin()
],
devServer:
open: true,
port: 3100,
contentBase: 'src',
hot: true
,
//这个节点用于配置所有的第三方模块加载器
module:
rules: [
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'] ,
// limit 给定的值，是图片的大小，单位是 byte， 如果我们引用的 图片，
// 大于或等于给定的 limit值，则不会被转为base64格式的字符串， 如果 图片小于给定的 limit 值，则会被转为 base64的字符串
test: /\\.(jpg|png|gif|bmp|jpeg)$/, use: 'url-loader?limit=7631&name=[hash:8]-[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-loader'
]
,
performance:
hints: false
package.json
"name": "webpack_study",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts":
"test": "echo \\"Error: no test specified\\" && exit 1",
"dev": "webpack-dev-server"
,
"keywords": [],
"author": "",
"license": "ISC",
"dependencies":
"jquery": "^3.3.1",
"vue": "^2.5.17",
"vue-router": "^3.0.1"
,
"devDependencies":
"babel-core": "^6.26.3",
"babel-loader": "^7.1.5",
"babel-plugin-transform-runtime": "^6.23.0",
"babel-preset-env": "^1.7.0",
"babel-preset-stage-0": "^6.24.1",
"bootstrap": "^3.3.6",
"css-loader": "^1.0.0",
"file-loader": "^2.0.0",
"html-webpack-plugin": "^3.2.0",
"less": "^3.8.1",
"less-loader": "^4.1.0",
"node-sass": "^4.9.4",
"sass-loader": "^7.1.0",
"style-loader": "^0.23.1",
"url-loader": "^1.1.2",
"vue-loader": "^15.4.2",
"vue-template-compiler": "^2.5.17",
"webpack": "^4.20.2",
"webpack-cli": "^3.1.2",
"webpack-dev-server": "^3.1.9"
以上是关于webpack一步步实现实时打包打包vue打包csslessscss文件babel用法的主要内容，如果未能解决你的问题，请参考以下文章