一：为什么使用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 执行流程
