前端打包是什么概念呢?
我们用webpack工具对js,css,甚至图片进行打包.
es6的语法js模块化用法(仅支持chrome)
按照py的逻辑,诸多的js被main.js调用,然后在html引入,就可以实现js的模块化开发,(互相的导入使用es6的语法), 谷歌浏览器可以识别es6,但是其他的浏览器就不怎么好使了.
大概是以下的一个逻辑.es6的导入需要注意的几个问题
- a.js
export let a = "maotai";
export let b = "maomao";
- b.js
export let b = "b.js";
- main.js 将a和b引入
import * as obj1 from "./a.js"
console.log(obj1.a, obj1.b);
import * as obj2 from "./b.js"
console.log(obj2.b);
- index.html,将main.js引入,引入的时候指定type. 谷歌浏览器支持,其他浏览器不一定支持. 后面需要转换成es5,(webpack和诸多插件会上场)
<script src="main.js" type="module"></script>
webpack基本使用(将js合成1个供html调用)
为了支持更多的浏览器,我们需要es6转换为es5,使更通用.
就需要用到webpack,
组合js css 图片base化(一般低于8k的图), 处理css均为他的强项
- npm run build调用逻辑
1,先找到package.json里的配置build
2,找到build对应的命令webpack, webpack会找./node_modules/./bin/webpack.cmd
3,./node_modules/./bin/webpack.cmd会调用./node_modules/webpack/bin/webpack.js
知道调用逻辑后,就可以心安理得的去配置玩一玩了.
- 我用的是webpack3.x版本,现在4.x好像不太一样了
npm init -y
npm install --save-dev webpack@3.8.1
webpack配置文件: webpack.config.js(需在执行命令的当前路径下有这个配置)
package.json -- ./nodemodule/.bin/webpack.cmd -- ./nodemodule/webpack/bin/webpack.js
npm run build
1. package.json
"scripts": {
"build": "webpack", //找到第二步
},
2.查找熟悉路径
.
ode_modules.binwebpack.cmd //找到 .
ode_moduleswebpackinwebpack.js
执行.
ode_moduleswebpackinwebpack.js时需要在执行目录下有webpack.config.js
- webpack.config.js
1,创建src/main.js src下与main相关的js
2,main.js是入口文件
3,webpack.config里指定入口main.js即可.
let path = require('path');
// console.log(path.resolve('./dist')); //绝对路径转相对路径
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve('./dist') //这里要是绝对路径,./dist/bundle.js
filename: 'bundle.js', //将包打到bundle.js里
}
};
- main.js
let s1 = require('./a.js');
console.log(s1);
- a.js
let s1 = "maomao3";
module.exports = s1;
- index.html
<script src="dist/bundle.js"></script>
babel转义es6到es5
0, 支持
1.es6的语法 import //前端用import js
2,node语法 require //后端用require nodejs
1.安装babel(es6转译es5)
- 转译器
- 转译器接口
- 转译器接口插件es2015(es6)
npm i --save-dev babel-core
npm i --save-dev babel-loader
npm i --save-dev babel-preset-es2015 //得到了很多文件夹,使得bable转译器接口识别es6语法
npm i --save-dev webpack@3.12.0
2.配置文件
let path = require('path');
// console.log(path.resolve('./dist')); //绝对路径转相对路径
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve('./dist') //必须绝对路径,
filename: 'bundle.js'
},
module: {
rules: [
// 1.匹配所有js 2,用bable-loader来转译(为es5), 3,排除node_modules目录下js
{test: /.js$/, use: 'babel-loader', exclude: /node_modules/}
]
}
};
3.babel-loader的配置文件.babelrc: 目的是加载插件
$ cat .babelrc
{
"presets": ["es2015"] // 让翻译官拥有解析es6语法的能力.
// 对应babel-preset-es2015插件
}
查看bundle.js可以查看转义为es5的结果.
babel转义es7到es5
npm i --save-dev babel-preset-state-0 //包含stage1 2 3, 注: stage4是另外的
$ cat .babelrc
{
"presets": ["es2015","stage-0"]
}
- main.js里添加es7语句测试
let a = b => c => d => b + c + d;
查看bundle.js可以查看转义为es5的结果.
babel转义css和图片
1.css-loader: 将css解析成模块
2.style-loader: 将css解析的内容插入到style标签
npm i --save-dev css-loader style-loader
- 写index.css
body {
background-color: lavender;
}
- main.js引入
import "./index.css"
- 配置webpack.config.js
module: {
rules: [
// 1.匹配所有js 2,用bable-loader来转译(为es5), 3,排除node_modules目录下js
{test: /.js$/, use: 'babel-loader', exclude: /node_modules/},
// 1.use是从右往左写 2,先经过css-loader,后经过style-loader
{test: /.css$/, use: ['style-loader', 'css-loader'], exclude: /node_modules/}
]
}
- 构建
npm run build
- 查看背景色,发现被改
样式被打到了bundle.js里了
webpack解析less
- 安装less解析器
npm i --save-dev less less-loader
- style.less
html {
body:after{
content:'我爱你';
color:red
}
}
- main.js
import './style.less';
- webpack.config.js
{test:/.less$/,use:['style-loader','css-loader','less-loader']},
- 构建
npm run build
webpack解析图片
- 安装
npm install file-loader url-loader --save-dev
- main.js
// 在js中引入图片需要import,或者写一个线上路径
import page from './2.jpg';
console.log(page); // page就是打包后图片的路径
let img = new Image();
img.src = page; // 写了一个字符串 webpack不会进行查找
document.body.appendChild(img);
- webpack.config.js
// 转化base64只在8192字节一下转化。其他情况下输出图片
{test:/.(jpg|png|gif)$/,use:'url-loader?limit=8192'},
{test:/.(eot|svg|woff|woff2|wtf)$/,use:'url-loader'},
这里图被转成了base64到了js文件里
1,js过大,2,超过8k的一般不需要base64
- webpack.config.js
{test: /.(jpg|png|gif)$/, use: 'url-loader?limit=8192'},
{test: /.(eot|svg|woff|woff2|wtf)$/, use: 'url-loader'},
注这里index.html和bundle.js放到同一个目录下(在上图的基础上index.html文件目录做了调整)
webpack解析html
npm install html-webpack-plugin --save-dev
webpack html模板使用
npm install webpack-dev-server --save-dev
- webpack.config.js
let HtmlWebpackPlugin = require('html-webpack-plugin');
plugins:[
new HtmlWebpackPlugin({ // 自动插入到dist目录中
template:'./src/index.html', // 使用的模板
// filename:'login.html' // 产出的文件名字
})
]
- 查看产出
在模板的基础上加了
<script type="text/javascript" src="bundle.js"></script></body>
开发环境(本质是个服务器)
1,不产出dist
2,页面自动刷新
3,修改自动编译
npm install webpack-dev-server --save-dev
- package.json
"scripts": {
"build": "webpack",
"dev": "webpack-dev-server"
},
- 启动测试
npm run dev
小结
- 安装(注意webpack和webpack-dev-server的版本号)
npm init -y
npm install --save-dev webpack@3 webpack-dev-server@2 babel-core babel-loader babel-preset-es2015 babel-preset-stage-0 css-loader style-loader less less-loader file-loader url-loader html-webpack-plugin
- webpack.config.js
let path = require("path");
let HtmlWebPackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/main.js",
output: {
path: path.resolve('./dist'),
filename: "bundle.js"
},
module: {
rules: [
{test: /.js/, use: "babel-loader", exclude: /node_modules/},
{test: /.css/, use: ['style-loader', 'css-loader'], exclude: /node_modules/},
{test: /.(jpg|png|gif|jpeg)$/, use: 'url-loader?limit=8192', exclude: /node_modules/},
]
},
plugins: [
new HtmlWebPackPlugin({
template: "./src/index.html"
})
]
};
mdkir src/
touch src/index.html
- .babelrc
{
"presets": ["es2015","stage-0"]
}
- main.js
document.write("maotai");
import "./index.css"
- package.json
"scripts": {
"test": "echo "Error: no test specified" && exit 1",
"build": "webpack",
"dev": "webpack-dev-server"
},
webpack结合vue
npm install vue
- App.vue
//import Vue from 'vue' //1.默认引入的是runtime vue=compoliter+runtime
import Vue from 'vue/dist/vue.js'
new Vue({
el: "#app",
template: "<div>hello world</div>"
});
-
import Vue from 'vue' //1.默认引入的是runtime vue=compoliter+runtime, 2,render可以充当compliter的作用
new Vue({
el: "#app",
//1,createElement返回的是虚拟dom 2,render将虚拟dom转换为真实dom
render: function (createElement) {
console.log(createElement('h1', ['maotai',
createElement('span', '毛台喜欢的事情')
])); //返回vNode
return createElement('h1', ['maotai',
createElement('span', '毛台喜欢的事情')
]);
}
});
-
import Vue from 'vue'
new Vue({
render: (h) => h('h1', ['hello', h('span', '一则头条')])
}).$mount('#app');
- 1.安装(注意版本)
npm i --save-dev vue-loader@13 vue-template-compiler@2
npm install vue-template-compiler //解析vue模板
npm install vue-loader //1.解析.vue文件 2.会自动调用 vue-template-compiler
- 2. webpack.config.js
{test: /.vue$/, use: 'vue-loader'},
- 3. App.vue
<template>
<div>123123213213</div>
</template>
<script>
export default {
data() {
return {}
},
methods: {},
computed: {},
componets: {}
}
</script>
<style scoped>
</style>
- 4. main.js
import Vue from 'vue'
import App from "./App.vue"
console.log(App); //1.一个对象 2,render接收一个组件 3,render将其渲染成真实dom
new Vue({
render: (h) => h('h1', ['hello', h('span', '一则头条')])
}).$mount('#app');
-
import Vue from 'vue'
import App from "./App.vue"
new Vue({
render: (h) => h(App) //渲染组件
}).$mount('#app');
