前端打包是什麼概念呢? 咱們用webpack工具對js,css,甚至圖片進行打包.javascript
es6的語法js模塊化用法(僅支持chrome)
按照py的邏輯,諸多的js被main.js調用,而後在html引入,就能夠實現js的模塊化開發,(互相的導入使用es6的語法), 谷歌瀏覽器能夠識別es6,可是其餘的瀏覽器就不怎麼好使了. 大概是如下的一個邏輯.es6的導入須要注意的幾個問題 
css
- 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,html
組合js css 圖片base化(通常低於8k的圖), 處理css均爲他的強項 前端
nodejs參數vue
- 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
知道調用邏輯後,就能夠問心無愧的去配置玩一玩了.java
- 我用的是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.查找熟悉路徑
.\node_modules\.bin\webpack.cmd //找到 .\node_modules\webpack\bin\webpack.js
執行.\node_modules\webpack\bin\webpack.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, 支持node
1.es6的語法 import //前端用import js 2,node語法 require //後端用require nodejs
1.安裝babel(es6轉譯es5)webpack
- 轉譯器 - 轉譯器接口 - 轉譯器接口插件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.配置文件es6
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: 目的是加載插件web
$ 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');