webpack核心用法,为什么要使用webpack
一:为什么使用webpack
1. 代码转换、文件优化、代码分割、模块合并、自动刷新、等等
2. webpack上手
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!--
模块化: -->
<script src="../dist/main.js"></script>
</body>
</html>
使用:
1安装webpack
npm install webpack webpack-cli -g
##### 2webpack初体验
在创建项目的使用,我们回顾一下我们写vue和react项目,是不是都有一个模块化的思想,将一个方法,一个组件单独文件中进行处理,在引入到我们想要的文件中。
案例目录:webpack1
问题:在文件的浏览器中不用使用这些模块化
解决方法:使用webpack进行打包处理
在终端执行 webpack =>生成 dist目录
代码:webpack2
3webpack的配置
(1) 在项目目录中创建一个webpack.config.js文件
const path = require('path'); module.exports = {
entry: './src/index.js',
output: {
path: path.resolve(__dirname, 'dist'), //不是绝对路径
filename: 'index.js',
},
};
(2) 我们要向和vue,react,通过命令产生打包文件
"build":"webpack"
4:webpack主文件(依赖图)
就是这个src/index.js 文件
这个文件就是vue.中的main.js文件,这个里面引入的所有代码都会被执行
5:处理loader
//1webpack为什么需要loader
//就是webpack处理的文件,不是js,文件类型,都需要loader来进行处理
//2loader是什么?
//就是用来辅助webpack,解析不是js文件的方法
案例一:处理css-loader
//1 创建元素
//例子登录
function Login(){
//创建元素
let oH = document.createElement('h2')
oH.innerHTML = '你好同学' //添加内容
oH.className ='title' return oH
}
//放到body上面去
document.body.appendChild(Login())
2创建css样式
// 引入我们的css
import '../css/login.css' //报错因为webpack不能处理 css为文件 //例子登录
function Login(){
//创建元素
let oH = document.createElement('h2')
oH.innerHTML = '你好同学' //添加内容
oH.className ='title' return oH
}
//放到body上面去
document.body.appendChild(Login())
解决方法
1 安装css-loader
npm install css-loader
2 配置webpack解析的文件
module: {
rules: [
{ test: /\.css$/, use: 'css-loader' } ],
},
发现页面样式没有效果,就是我们刚刚的配置,让webpack,可以解析css文件,但是没有使用
在安装一个loader =》style -loader
module: {
rules: [
// { test: /\.css$/, use: 'css-loader' } //单个
//注意又有一个问题: use执行的顺序 从右向做
{ test: /\.css$/, use:[ 'style-loader','css-loader'] } ],
},
案例处理less文件
import '../css/login.less'
//创建了一个标签
function ohs(){
let oh = document.createElement('h2')
oh.innerHTML ='你好'
oh.className ='title'
return oh
}
//webpack 只能处理.js 文件 =》其他的文件不能处理 // 提供的loader?这个loader是什么?loader作用? //就是一个webpack中用来解析成webpack认识的文件
//例子=》css
//安装 css-loader
//配置 document.body.appendChild(ohs())
需要安装less-loader ,webpack才能解析这个文件
module: {
rules: [
// { test: /\.css$/, use: 'css-loader' } //单个
//注意又有一个问题: use执行的顺序 从右向做
{ test: /\.css$/, use:[ 'style-loader','css-loader'] },
//注意这里的解析方式
// less=>css =>在通过style-loader使用样式
{ test: /\.less$/, use:[ 'style-loader','css-loader','less-loader'] }
],
},
6:webpack中babel的使用
作用:就是将es6的语法变成 es5的语法
案例 将es6箭头函数变成es5的语法
var title= '小明'
const show =()=>{
console.log(title);
} show()
1安装babel
npm install --save-dev @babel/core @babel/cli
npm install babel-loader
npm install @babel/plugin-transform-arrow-functions
2配置规则
// 处理js文件
mode:'development',
{
test: /\.js$/,
// 需要使用babel提供的几个插件
// use:[ 'babel-loader']
use: {
loader: "babel-loader",
options: { //选项
plugins: [
'@babel/plugin-transform-arrow-functions' ]
} }
}
7:webpack中plugins的使用(插件的使用)
我们的这个模板是需要自己写的,=》index.html,
我们通过使用插件自动创建模板
1安装插件
npm install html-webpack-plugin
2webpack配置插件
//配置插件=>在modult.exports上添加一个属性 plugins
let HtmlWebpackPlugin = require('html-webpack-plugin') //类
plugins:[ //数组可以放多个
new HtmlWebpackPlugin()
]
8:webpack加载vue文件
1 安装相关依赖
npm install vue-template-compiler
npm install vue@2.6.14
npm install vue-loader@15.9.8
2 创建根组件
<template>
<div class="title">
<h2>{{msg}}</h2>
</div>
</template> <script>
export default {
data(){
return{
msg:'你好同学'
}
}
}
</script> <style scoped lang='less'>
.title{
color:red;
}
</style>
3在index.js中创建vue实例
//main.js入口主文件 import Vue from 'vue'
import App from './App.vue' new Vue({
render:h=>h(App)
}).$mount('#app')
4配置解析vue-loader
const VueLoaderPlugin = require('vue-loader/lib/plugin')
{ test: /\.vue$/, use: ['vue-loader'] },
],
//配置插件
plugins:[
new HtmlWebpackPlugin(),
new VueLoaderPlugin()
]
webpack 我们需要掌握的知识:
1 知道webpack 作用:
2知道微博pack 使用 loader 和插件
3 你在项目中有没有配置webpack, 配置过
1)代理 devServer
2) 通过webpack 处理性能优化的 =》 js ,css , 图片,等等
4webpack 执行流程
最新文章
- 分享我对 ASP.NET vNext 的一些感受,也许多年回过头看 So Easy!
- Linux网络相关配置
- spring aop一些名词的理解
- 高性能分布式内存队列系统beanstalkd(转)
- JSch - Java实现的SFTP(文件上传详解篇)
- 12-factor
- codeforces B. Permutation 解题报告
- VS输入输出基本操作以及数据类型和类型转换
- Python学习路程day4
- 【转】ODBC、OLE DB、 ADO的区别
- Yii2中request的使用方法
- 1.cocos2dx存储卡的游戏代码、而游戏移植到“华为荣耀”电话、问题的总结移植
- solr笔记之solr下载及安装
- WAS集群系列(2):数据库连接低级错误——网络连接问题
- 总结Array类型中常用的方法
- 线程安全(中)--彻底搞懂synchronized(从偏向锁到重量级锁)
- Logstash filter 插件之 grok
- java引用
- CF797F Mice and Holes 贪心、栈维护DP
- Rodrigues Formula
热门文章
- vulnhub靶场之EVILBOX: ONE
- 重新认识下JVM级别的本地缓存框架Guava Cache(3)——探寻实现细节与核心机制
- 文件服务器 — File Browser
- C++编程笔记(智能指针学习)
- JavaScript Promises, async/await
- 《HTTP权威指南》 – 11.验证码和新鲜度
- List排序(降序)
- 软件工程大作业——“你帮我助”软件开发v2.0
- ob_aes_饭团影视
- C++可执行文件绝对路径获取与屏蔽VS安全检查