一：为什么使用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 [email protected] npm install [email protected]
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 执行流程
标签：文件,vue,核心,js,loader,webpack,用法,css From： https://www.cnblogs.com/chccee/p/17088883.html