07 . 前端工程化(ES6模塊化和webpack打包css,less,scss,圖片,字體,配置Vue組件加載器和發佈項目)
模塊化規範
傳統開發模式主要問題
/* 1. 命名衝突 2. 文件依賴 */
經過模塊化解決上述問題css
/* 模塊化就是把單獨的一個功能封裝在一個模塊(文件)中,模塊之間相互隔離, 可是能夠經過特定的接口公開內部成員,也能夠依賴別的模塊. 模塊化開發好處: 方便代碼的重用,從而提升開發效率,而且方便後期的維護 */
瀏覽器模塊化規範
/* AMX (Require.js) CMD (Sea.js) */
服務器端模塊化規範
/*
CommonJS
1.模塊分文單文件模塊與包
2.模塊成員導出: module.exports和exports
3.模塊成員導入: require('模塊標識符')
*/
ES6模塊化
在ES6模塊化規範以前,Javascript社區已經嘗試並提出了AMD,CMD,CommonJS等模塊化規範.html
可是,這些社區提出的模塊化標準仍是存在必定的差別性與侷限性,並非瀏覽器與服務器通用的模塊化標準,例如:前端
/* AMD和CMD適用於瀏覽器端的JavaScript模塊化 CommonnJS適用於服務器端的JavaScript模塊化 */
所以,在ES6語法規範中,在語言層面上定義了ES6模塊化規範,是瀏覽器與服務器端通用的模塊化開發規範.vue
ES6模塊化規範中定義node
/* 1. 每一個js文件都是一個獨立的模塊 2. 導入模塊成員使用import關鍵字 3. 暴露模塊成員使用export關鍵字 */
推薦使用ES6模塊化，由於AMD，CMD侷限使用與瀏覽器端，而CommonJS在服務器端使用。 ES6模塊化是瀏覽器端和服務器端通用的規範.jquery
Node.js經過babel體驗ES6模塊化
1.安裝babelwebpack
npm install --save-dev @babel/core @babel/cli @babel/preset-env @babel/node npm install --save @babel/polyfill
2.建立babel.config.jses6
在項目目錄中建立babel.config.js文件。
編輯js文件中的代碼以下web
const presets = [
["@babel/env",{
targets:{
edge:"17",
firefox:"60",
chrome:"67",
safari:"11.1"
}
}]
]
//暴露
module.exports = { presets }
3.建立index.js文件chrome
/*
在項目目錄中建立index.js文件做爲入口文件
在index.js中輸入須要執行的js代碼，例如：
console.log("ok");
*/
4.使用npx執行文件
打開終端，輸入命令：npx babel-node ./index.js
默認導出
默認導出語法爲export default 默認導出的成員
export default {
成員A,
成員B,
.......
},以下：
let num = 100;
export default{
num
}
Example1
// 當前文件模塊爲m1.js
// 定義私有成員a和c
let a = 10
let c = 20
let d = 30
// 外界訪問不到變量b,由於他沒有被暴露出去
function show() {
console.log('1111')
}
// 將本模塊的私有成員暴露出去,供其餘模塊使用
export default {
a,
c,
show
}
默認導入
默認導入語法import 接受名稱 from '模塊標識符'
// 導入模塊成員
import m1 from './m1/m1.js'
console.log(m1)
// 打印輸出的結果爲:
youmen@bogon Vue_Student_Demo % npx babel-node ./index.js
{ a: 10, c: 20, d: 30, show: [Function: show] }
注意: 每一個模塊中,只容許使用惟一的一次export default,不然會報錯
按需導出
按需導出語法
Export let s1 = 10
export let num = 998;
export let myName = "jack";
export function fn = function(){ console.log("fn") }
Example
// 當前文件模塊爲m1.js
// 向外按需導出變量爲s1
export let s1 = 'aaa'
// 向外按需導出變量爲s2
export let s2 = 'ccc'
// 向外按需導出方法 say
export function say = function() {}
按需導入
按需導入語法
Import { s1 } from '模塊標識符'
import { num,fn as printFn ,myName } from "./test.js"
// 同時導入默認導出的成員以及按需導入的成員
import test,{ num,fn as printFn ,myName } from "./test.js"
// 注意：一個模塊中既能夠按需導入也能夠默認導入，一個模塊中既能夠按需導出也能夠默認導出
Example1
// 導入模塊成員
import { s1,s2 as ss2, say } from './m1.js'
console.log(s1) // 打印輸出aaa
console.log(s2) // 打印輸出ccc
console.log(say) // 打印輸出[Function: say]
直接導入並執行代碼
有時候,咱們
只想單純執行某個模塊的代碼,並不須要獲得模塊中向外暴露的成員,此時,能夠直接導入並執行模塊代碼
import "./test2.js";
m1.js
// 當前文件模塊爲m2.js
// 在當前模塊中執行一個for循環操做
for(let i=0;i<3;i++){
console.log(i)
}
Webpack概念
當前Web開發面臨的困境
/* 文件依賴關係錯綜複雜 靜態資源請求效率低 模塊化支持不友好 瀏覽器對高級JavaScript特性兼容程度較低 */
webpack是一個流行的前端項目構建工具，能夠解決目前web開發的困境。
webpack提供了模塊化支持，代碼壓縮混淆，解決js兼容問題，性能優化等特性，提升了開發效率和項目的可維護性
WebPack的基本使用
/*
1.建立列表隔行變色項目
新建項目空白目錄,並運行npm init -y 命令, 初始化包管理配置文件package.json
2.新建src源代碼目錄
3.新建src/index.html首頁
4. 初始化首頁基本結構
5. 運行 npm install jquery -s 命令,安裝jQuery
導入jQuery
打開index.js文件，編寫代碼導入jQuery並實現功能：
import $ from "jquery";
$(function(){
$("li:odd").css("background","cyan");
$("li:odd").css("background","pink");
})
6. 經過模塊化形式,實現列表隔行變色效果
*/
注意：此時項目運行會有錯誤，由於import $ from "jquery";這句代碼屬於ES6的新語法代碼，在瀏覽器中可能會存在兼容性問題 因此咱們須要webpack來幫助咱們解決這個問題。
項目中配置webpack
/*
1).打開項目目錄終端，輸入命令:
npm install webpack webpack-cli -D
2).而後在項目根目錄中，建立一個 webpack.config.js 的配置文件用來配置webpack
在 webpack.config.js 文件中編寫代碼進行webpack配置，以下：
module.exports = {
mode:"development"//能夠設置爲development(開發模式)，production(發佈模式)
}
補充：mode設置的是項目的編譯模式。
若是設置爲development則表示項目處於開發階段，不會進行壓縮和混淆，打包速度會快一些
若是設置爲production則表示項目處於上線發佈階段，會進行壓縮和混淆，打包速度會慢一些
3).修改項目中的package.json文件添加運行腳本dev，以下：
"scripts":{
"dev":"webpack"
}
注意：scripts節點下的腳本，能夠經過 npm run 運行，如：
運行終端命令：npm run dev
將會啓動webpack進行項目打包
4).運行dev命令進行項目打包，並在頁面中引入項目打包生成的js文件
打開項目目錄終端，輸入命令:
npm run dev
等待webpack打包完畢以後，找到默認的dist路徑中生成的main.js文件，將其引入到html頁面中。
瀏覽頁面查看效果。
*/
設置Webpack的打包入口/出口
/*
在webpack 4.x中.
默認會將src/index.js 做爲默認的打包入口js文件
默認會將dist/main.js 做爲默認的打包輸出js文件
*/
若是不想使用默認的入口/出口js文件，咱們能夠經過改變 webpack.config.js 來設置入口/出口的js文件，以下：
const path = require("path"); // 導入node.js中專門操做路徑的模塊
module.exports = {
mode:"development",
// 設置入口文件路徑
entry: path.join(__dirname,"./src/xx.js"),
//設置出口文件
output:{
//設置輸出文件路徑
path:path.join(__dirname,"./dist"),
//設置輸出文件名稱
filename:"res.js"
}
}
Webpack的自動打包
/*
1. 運行npm install webpack-dev-server -D 命令,安裝支持項目自動打包的工具
2. 修改package.json --> scripts中的dev命令以下
"scripts": {
"dev": "webpack-dev-server" // script節點下的腳本,能夠經過npm run執行
}
3. 將src --> index.html中,script腳本的引用路徑,修改成 "/buldle.js"
4. 運行npm run dev命令, 從新進行打包
5. 瀏覽器中訪問http://localhost:8080地址,查看自動打包效果
*/
注意
/*
webpack-dev-server 會啓動一個實時打包的http服務器
webpack-dev-server 打包生成的輸出文件,默認放到了項目根目錄中,並且是虛擬機的,看不見的
在自動打包完畢以後，默認打開服務器網頁，實現方式就是打開package.json文件，修改dev命令：
"dev": "webpack-dev-server --open --host 127.0.0.1 --port 9999"
*/
配置默認預覽頁面
使用html-webpack-plugin 能夠生成一個預覽頁面。
由於當咱們訪問默認的 http://localhost:8080/的時候，看到的是一些文件和文件夾，想要查看咱們的頁面
還須要點擊文件夾點擊文件才能查看，那麼咱們但願默認就能看到一個頁面，而不是看到文件夾或者目錄。
實現默認預覽頁面功能的步驟以下：
A.安裝默認預覽功能的包:html-webpack-plugin
npm install html-webpack-plugin -D
B.修改webpack.config.js文件，以下：
//導入包
const HtmlWebpackPlugin = require("html-webpack-plugin");
//建立對象
const htmlPlugin = new HtmlWebpackPlugin({
//設置生成預覽頁面的模板文件
template:"./src/index.html",
//設置生成的預覽頁面名稱,該文件存在於內存中,在目錄中不顯示
filename:"index.html"
})
C.繼續修改webpack.config.js文件中向外暴露的配置對象，添加plugins信息：
module.exports = {
......
plugins:[ htmlPlugin ]
// plugins數組是webpack打包期間會用到的一些插件列表
}
Webpack中的加載器
經過loader打包非js模塊
經過loader打包非js模塊：默認狀況下，webpack只能打包js後綴名結尾的文件，若是想要打包非js文件，須要調用loader加載器才能打包.
Loader加載器包含
/*
1).less-loader: 處理.less相關文件
2).sass-loader: 處理.scss相關文件
3).url-loader: 打包處理css中與url路徑有關的文件
4).babel-loader:處理高級js語法的加載器
5).postcss-loader
6).css-loader,style-loader
*/
loader調用過程
webpack中加載器的基本使用
打包處理css文件
/* 運行npm i style-loader css-loader -D 命令, 安裝處理的css文件的loader */
2. 在webpack.config.js的module --> rules 數組中,添加loader規則以下
// 全部第三方文件模塊的匹配規則
module: {
rules: [
{ test: /\.css$/,use: ['style-loader','css-loader'] }
]
}
// 其中, test表示匹配的文件類型, use表示對應要調用的loader
注意
/* use數組中指定的loader順序是固定的. 多個loader的調用順序是: 從後往前調用 */
處理less文件
1).安裝包
npm install less-loader less -D
2).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
// 編譯模式
mode: 'development', // development production
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'), // 輸出文件的存放路徑
filename: 'bundle.js' // 輸出文件的名稱
},
plugins: [htmlPlguin],
module: {
rules: [
{ test: /\.css$/,use: ['style-loader','css-loader'] },
{ test: /\.less$/,use: ['style-loader','css-loader','less-loader' ]}
]
}
}
打包處理scss文件
npm i sass-loader node-sass -D
// 在webpack.connfig.js的module->rules數組中,添加loader規則以下
module: {
rules: {
{ test: /\.scss$/,use: ['style-loader','css-loader','sass-loader'] }
}
}
配置postcss自動添加css的兼容前綴
1).安裝包
npm install postcss-loader autoprefixer -D
2).在項目根目錄建立並配置postcss.config.js文件
const autoprefixer = require("autoprefixer");
module.exports = {
plugins:[ autoprefixer ]
}
3).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設置須要匹配的文件類型，支持正則
test:/\.css$/,
//use表示該文件類型須要調用的loader
use:['style-loader','css-loader','postcss-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
}
]
}
}
打包樣式表中的圖片以及字體文件
// 在樣式表css中有時候會設置背景圖片和設置字體文件，同樣須要loader進行處理
// 使用url-loader和file-loader來處理打包圖片文件以及字體文件
1).安裝包
npm install url-loader file-loader -D
2).配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
......
plugins:[ htmlPlugin ],
module : {
rules:[
{
//test設置須要匹配的文件類型，支持正則
test:/\.css$/,
//use表示該文件類型須要調用的loader
use:['style-loader','css-loader']
},
{
test:/\.less$/,
use:['style-loader','css-loader','less-loader']
},
{
test:/\.scss$/,
use:['style-loader','css-loader','sass-loader']
},{
test:/\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/,
//limit用來設置字節數，只有小於limit值的圖片，纔會轉換
//爲base64圖片
use:"url-loader?limit=16940"
}
]
}
}
打包js高級語法
/*
在編寫js的時候，有時候咱們會使用高版本的js語法
有可能這些高版本的語法不被兼容，咱們須要將之打包爲兼容性的js代碼
咱們須要安裝babel系列的包
A.安裝babel轉換器
npm install babel-loader @babel/core @babel/runtime -D
B.安裝babel語法插件包
npm install @babel/preset-env @babel/plugin-transform-runtime @babel/plugin-proposal-class-properties -D
C.在項目根目錄建立並配置babel.config.js文件
*/
module.exports = {
presets:["@babel/preset-env"],
plugins:[ "@babel/plugin-transform-runtime", "@babel/plugin-proposal-class-properties" ]
}
// D.配置規則：更改webpack.config.js的module中的rules數組
module.exports = {
// 編譯模式
mode: 'development', // development production
entry: path.join(__dirname, './src/index.js'),
output: {
path: path.join(__dirname, './dist'), // 輸出文件的存放路徑
filename: 'bundle.js' // 輸出文件的名稱
},
plugins: [htmlPlguin],
module: {
rules: [
{ test: /\.css$/, use: ['style-loader', 'css-loader', 'postcss-loader'] },
{ test: /\.less$/, use: ['style-loader', 'css-loader', 'less-loader'] },
{ test: /\.scss$/, use: ['style-loader', 'css-loader', 'sass-loader'] },
{ test: /\.jpg|png|gif|bmp|ttf|eot|svg|woff|woff2$/, use: 'url-loader?limit=16941' },
{ test: /\.js$/, use: 'babel-loader', exclude: /node_modules/ }
]
}
}
Vue單文件組件
傳統Vue組件的缺陷
全局定義的組件不能重名，字符串模板缺少語法高亮，不支持css(當html和js組件化時，css沒有參與其中) 沒有構建步驟限制，只能使用H5和ES5，不能使用預處理器（babel）
解決方案
/*
使用Vue單文件組件，每一個單文件組件的後綴名都是.vue
每個Vue單文件組件都由三部分組成
1).template 組件組成的模板區域
2).script 組成的業務邏輯區域
3).style 樣式區域
*/
Example
<template>
組件代碼區域
</template>
<script>
js代碼區域
</script>
<style scoped>
樣式代碼區域
</style>
安裝Vetur插件可使得.vue文件中的代碼高亮
配置.vue文件的加載器
// A.安裝vue組件的加載器
npm install vue-loader vue-template-compiler -D
// B.配置規則：更改webpack.config.js的module中的rules數組
const VueLoaderPlugin = require("vue-loader/lib/plugin");
const vuePlugin = new VueLoaderPlugin();
module.exports = {
......
plugins:[ htmlPlugin, vuePlugin ],
module : {
rules:[
...//其餘規則
{
test:/\.vue$/,
loader:"vue-loader",
}
]
}
}
Webpack中使用Vue
想要讓vue單文件組件可以使用，咱們必需要安裝vue並使用vue來引用vue單文件組件。
/*
A.安裝Vue
npm install vue -S
B.在index.js中引入vue：import Vue from "vue"
C.建立Vue實例對象並指定el，最後使用render函數渲染單文件組件
const vm = new Vue({
el:"#first",
render:h=>h(app)
})
*/
Webpack打包發佈項目
在項目上線以前，咱們須要將整個項目打包併發布
/*
A.配置package.json
"scripts":{
"dev":"webpack-dev-server",
"build":"webpack -p"
}
B.在項目打包以前，能夠將dist目錄刪除，生成全新的dist目錄
*/
相關文章
- 1. Vue之webpack打包CSS圖片字體
- 2. vue學習（12）—模塊化webpack加載less、vue、圖片等資源文件
- 3. Webpack:前端資源模塊化管理和打包工具
- 4. 使用 webpack + react + redux + es6 開發組件化前端項目
- 5. vue組件續和前端工程化
- 6. 前端工程化和webpack
- 7. Webpack（一）前端項目打包配置
- 8. webpack項目打包+Vue組件化開發
- 9. 6 JS的模塊化 ES6模塊化及webpack打包
- 10. JS的模塊化 ES6模塊化及webpack打包
- 更多相關文章...
- • Lua 模塊與包 - Lua 教程
- • Maven 項目模板 - Maven教程
- • IntelliJ IDEA 代碼格式化配置和快捷鍵
- • IDEA下SpringBoot工程配置文件沒有提示
相關標籤/搜索
每日一句
-
每一个你不满意的现在，都有一个你没有努力的曾经。
歡迎關注本站公眾號,獲取更多信息
