1.1 什么是Webpack？
從本質上來講，webpack是一個現代的JavaScript應用的靜態模塊打包工具，
前端模塊化
- 在ES6之前，我們要想進行模塊化開發，就必須借助于其他的工具，讓我們可以進行模塊化開發，
- 并且在通過模塊化開發完成了專案后，還需要處理模塊間的各種依賴，并且將其進行整合打包，
- 而webpack其中一個核心就是讓我們可能進行模塊化開發，并且會幫助我們處理模塊間的依賴關系，
- 而且不僅僅是JavaScript檔案，CSS、圖片、json檔案等等在webpack中都可以被當做模塊來使用，
打包
就是將webpack中的各種資源模塊進行打包合并成一個或多個包(Bundle)，
并且在打包的程序中，還可以對資源進行處理，比如壓縮圖片，將scss轉成css，將ES6語法轉成ES5語法，將TypeScript轉成JavaScript等等操作，
webpack安裝
安裝webpack首先需要安裝Node.js，Node.js自帶了軟體包管理工具npm，NPM官方的管理的包都是從 http://npmjs.com下載的，但是這個網站在國內速度很慢，這里推薦使用淘寶 NPM 鏡像 http://npm.taobao.org/ ，淘寶 NPM 鏡像是一個完整npmjs.com 鏡像，同步頻率目前為 10分鐘一次，以保證盡量與官方服務同步，
設定鏡像和存盤地址：
# 由于npm代碼倉庫的服務器在國外，由于Great Firewall的緣故,這時可以使用淘寶的npm代碼倉庫，通過npm安裝cnpm
npm install -g cnpm --registry=https://registry.npm.taobao.org
# 安裝成功后，可以通過以下命令查看cnpm版本：
cnpm -v
#設定npm下載包時保存在本地的地址(建議英文目錄),通過cnpm來操作下載速度會得到很大提升，但包的版本不一定是最新的，
cnpm config set prefix "E:\\Develop\\repo_npm"
#查看cnpm配置資訊
cnpm config list
查看自己的node版本
node -v
全域安裝webpack(這里我先指定版本號3.6.0，因為vue cli2依賴該版本)
cnpm install webpack@3.6.0 -g
查看webpack版本
webpack --version
1.2 Webpack 初體驗
專案目錄
? 
檔案和檔案夾決議：
- dist檔案夾：用于存放之后打包的檔案，
- src檔案夾：用于存放我們寫的源檔案
- main.js：專案的入口檔案，具體內容查看下面詳情，
- mathUtils.js：定義了一些數學工具函式，可以在其他地方參考，并且使用，
- index.html：瀏覽器打開展示的首頁html，package.json：通過npm init生成的，npm包管理的檔案，
mathUtils.js
function add(num1, num2) {
return num1 + num2
}
function mul(num1, num2) {
return num1 * num2
}
// 模塊匯出
module.exports = {
add,
mul
}
info.js
// 匯出模塊
export const name = 'GuardWhy';
export const age = 18;
export const height = 1.71
main.js
// 1. 使用commonjs的模塊化匯入
const {add, mul} = require('./mathUtils')
// 輸出結果
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用es6的模塊化規范
import {name, age, height} from "./info";
console.log(name);
console.log(age);
console.log(height);
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack基本使用</title>
</head>
<body>
<!--引入js檔案-->
<script src="dist/bundle.js"></script>
</body>
</html>
webpack的指令打包
webpack src/main.js dist/bundle.js
使用打包后的檔案
打包后會在dist檔案下，生成一個bundle.js檔案
bundle.js檔案，是webpack處理了專案直接檔案依賴后生成的一個js檔案，只需要將這個js檔案在index.html中引入即可，
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack基本使用</title>
</head>
<body>
<!--引入js檔案-->
<script src="dist/bundle.js"></script>
</body>
</html>
執行結果
? 
1.3 webpack的配置
專案目錄
? 
組態檔
webpack.config.js
// 1.獲得路徑
const path = require('path');
// 支持匯出
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
}
區域安裝webpack
因為一個專案往往依賴特定的webpack版本，全域的版本可能很這個專案的webpack版本不一致，匯出打包出現問題，
所以通常一個專案，都有自己區域的webpack，
cnpm install webpack@3.6.0 --save-dev
配置package.json
打開專案的命令所在位置，執行npm init命令，可得到package.json檔案，可以在package.json的scripts中定義自己的執行腳本，
{
"name": "guardwhy",
"version": "1.0.0",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack"
},
"author": "guardwhy",
"license": "ISC",
"devDependencies": {
"webpack": "^3.6.0"
},
"dependencies": {},
"description": ""
}
當執行npm run build命令時候會直接生成bundle.js，
1.4 什么是loader？
? 
webpack用來做什么呢？
在之前的實體中，主要是用webpack來處理寫的js代碼，并且webpack會自動處理js之間相關的依賴，
在開發中不僅僅有基本的js代碼處理，也需要加載css、圖片，也包括一些高級的將ES6轉成ES5代碼，將TypeScript轉成ES5代碼，將scss、less轉成css，將.jsx、.vue檔案轉成js檔案，對于webpack本身的能力來說，對于這些轉化是不支持的，那怎么辦呢？給webpack擴展對應的loader就可以啦，
loader使用程序
步驟一：通過npm安裝需要使用的loader，
步驟二：在webpack.config.js中的modules關鍵字下進行配置，
1.4.1 css檔案處理
專案開發程序中，必然需要添加很多的樣式，而樣式往往寫到一個單獨的檔案中，
在src目錄中，創建一個css檔案，其中創建一個normal.css檔案，也可以重新組織檔案的目錄結構，將零散的js檔案放在一個js檔案夾中，
? 
normal.css中的代碼非常簡單，就是將body設定為red，
body {
background-color: red;
}
但是，這個時候normal.css中的樣式會生效嗎？當然不會，因為壓根就沒有參考它，
webpack也不可能找到它，因為只有一個入口，webpack會從入口開始查找其他依賴的檔案，
在入口檔案中參考
main.js
// 1. 使用commonjs的模塊化匯入
const {add, mul} = require('./js/mathUtils')
// 輸出結果
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用es6的模塊化規范
import {name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);
// 依賴css檔案
require('./css/normal.css')
執行 npm run build 命令后出現錯誤！！！
加載.css檔案和格式必須有對應的loader*
檔案目錄: https://webpack.docschina.org/loaders/#styling
安裝CSS-loader
cnpm install --save-dev css-loader@3.6.0
安裝style-loader
cnpm install --save-dev style-loader@1.3.0
安裝以后可以在package.json檔案中查看到版本號，
配置webpack.config.js
// 1.獲得路徑
const path = require('path');
// 支持匯出
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{ test: /\.css$/,
/*
css-loader只負責將css檔案進行加載
style-loader負責將樣式添加到DOM中
使用多個loader時, 是從右向左
*/
use: ['style-loader','css-loader']
}
]
}
}
執行npm run build命令，可能會出現以下的問題，
通過查看錯誤提示，發現會不會有可能是css-loader的版本太高了，所以把css-loader的版本由4.2.0改為了3.6.0！！！
執行結果
?
1.4.2 less檔案處理
專案目錄
? 
在入口檔案中參考
main.js
// 1. 使用commonjs的模塊化匯入
const {add, mul} = require('./js/mathUtils')
// 輸出結果
console.log(add(20, 30));
console.log(mul(20, 30));
// 2.使用es6的模塊化規范
import {name, age, height} from "./js/info";
console.log(name);
console.log(age);
console.log(height);
// 依賴css檔案
require('./css/normal.css')
// 依賴less檔案
require('./css/special.less')
document.write('<h3>kobe是mvp!!!</h3>')
加載.less檔案和格式必須有對應的loader*
檔案目錄: https://webpack.docschina.org/loaders/#styling
安裝less-loader
cnpm install less-loader@5.0.0 --save-dev
安裝less
cnpm install less@3.13.1--save-dev
安裝以后可以在package.json檔案中查看到版本號，
配置webpack.config.js
// 1.獲得路徑
const path = require('path');
// 支持匯出
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js'
},
module: {
rules: [
{ test: /\.css$/,
/*
css-loader只負責將css檔案進行加載
style-loader負責將樣式添加到DOM中
使用多個loader時, 是從右向左
*/
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
}
]
}
}
執行npm run build命令，
執行結果
1.4.3 圖片檔案處理
專案目錄
normal.css中的樣式
body {
background: url("../img/timg.jpg");
}
加載圖片檔案和格式必須有對應的loader
檔案目錄: https://webpack.docschina.org/loaders/#files
安裝url-loader
cnpm install url-loader@2.0.0 --save-dev
安裝file-loader
cnpm install file-loader@2.0.0 --save-dev
安裝以后可以在package.json檔案中查看到版本號，
配置webpack.config.js
// 1.獲得路徑
const path = require('path');
// 支持匯出
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{ test: /\.css$/,
/*
css-loader只負責將css檔案進行加載
style-loader負責將樣式添加到DOM中
使用多個loader時, 是從右向左
*/
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
// 當加載的圖片，小于limit時會將圖片編譯成base64字串形式
//當加載的圖片，大于limit時需要使用file-loader模塊進行加載
limit: 13000,
name: 'img/[name].[hash:8].[ext]'
}
}
]
}
]
}
}
執行npm run build命令，
執行結果
1.4.4 ES6語法處理
果希望將ES6的語法轉成ES5，那么就需要使用babel，而在webpack中，直接使用babel對應的loader就可以了，
安裝babel-loader
cnpm install --save-dev babel-loader@7 babel-core babel-preset-es2015
安裝以后可以在package.json檔案中查看到版本號，
配置webpack.config.js
// 1.獲得路徑
const path = require('path');
// 支持匯出
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{ test: /\.css$/,
/*
css-loader只負責將css檔案進行加載
style-loader負責將樣式添加到DOM中
使用多個loader時, 是從右向左
*/
use: ['style-loader','css-loader']
},
{
test: /\.less$/,
use: [{
loader: "style-loader" // creates style nodes from JS strings
}, {
loader: "css-loader" // translates CSS into CommonJS
}, {
loader: "less-loader" // compiles Less to CSS
}]
},
{
test: /\.(png|jpg|gif)$/,
use: [
{
loader: 'url-loader',
options: {
limit: 13000,
name: 'img/[name].[hash:8].[ext]'
}
}
]
},
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
}
]
}
}
重新打包，查看bundle.js檔案，發現其中的內容變成了ES5的語法，
1.5 webpack配置Vue
1.5.1 引入vue.js
安裝Vue，在實際專案中也會使用vue的，所以并不是開發時依賴，
cnpm install vue@2.5.11 --save
main.js
import Vue from 'vue'
new Vue({
el:'#app',
data:{
message:'hello Vue.js!!!'
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack配置Vue</title>
</head>
<body>
<div id = "app">
{{message}}
</div>
<!--引入js檔案-->
<script src="dist/bundle.js"></script>
</body>
</html>
執行npm run build 命令結果，報錯！！！
? 
解決方案修改webpack的配置
webpack.config.js
// 以下內容
resolve: {
// alias: 別名
extensions: ['.js', '.css', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
執行結果
1.5.2 el和template區別
正常運行之后，來考慮另外一個問題
如果希望將data中的資料顯示在界面中，就必須是修改index.html
但是html模板在之后的開發中，并不希望手動的來頻繁修改，
定義template屬性
在前面的Vue實體中，我們定義了el屬性，用于和index.html中的#app進行系結，讓Vue實體之后可以管理它其中的內容，
這里，可以將div元素中的{{message}}內容刪掉，只保留一個基本的id為div的元素，
el和template模板的關系是什么呢？
知道el用于指定Vue要管理的DOM，可以幫助決議其中的指令、事件監聽等，
而如果Vue實體中同時指定了template，那么template模板的內容會替換掉掛載的對應el的模板，
這樣做之后就不需要在以后的開發中再次操作index.html，只需要在template中寫入對應的標簽即可，
代碼示例
main.js
import Vue from 'vue'
new Vue({
el:'#app',
template:`
<div>
<h3>{{message}}</h3>
<button @click= "btnClick">按鈕</button>
<h3>{{name}}</h3>
</div>
`,
data:{
message:'hello Vue.js!!!',
name: 'guardwhy'
},
methods:{
btnClick(){
}
}
})
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack配置Vue</title>
</head>
<body>
<div id = "app">
</div>
<!--引入js檔案-->
<script src="dist/bundle.js"></script>
</body>
</html>
執行結果
1.5.3 Vue組件化開發
專案目錄
? 
安裝vue-loader和vue-template-compiler
cnpm install vue-loader vue-template-compiler --save-dev
安裝以后可以在package.json檔案中查看到版本號，
修改webpack.config.js的組態檔
// 1.獲得路徑
const path = require('path');
// 引入webpack
const webpack = require('webpack');
// 支持匯出
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js',
publicPath: 'dist/'
},
module: {
rules: [
{
test: /\.js$/,
exclude: /(node_modules|bower_components)/,
use: {
loader: 'babel-loader',
options: {
presets: ['es2015']
}
}
},
{
test: /\.vue$/,
use: ['vue-loader']
}
]
},
resolve: {
// alias: 別名
extensions: ['.js', '.css', '.vue'],
alias: {
'vue$': 'vue/dist/vue.esm.js'
}
}
}
代碼示例
main.js
import Vue from 'vue'
import App from "./vue/App.vue"
new Vue({
el:'#app',
template:'<App/>',
components:{
App
}
})
App.vue
<template>
<div>
<h3 class="title">{{message}}</h3>
<button @click="btnClick">按鈕</button>
<h3>{{name}}</h3>
<Cpn></Cpn>
</div>
</template>
<script>
// 引入組件
import Cpn from './Cpn'
export default {
name: "App",
// 注冊Cpn組件
components: {
Cpn
},
data(){
return {
message: 'hello webpack!!!!',
name: 'guardwhy'
}
},
methods: {
btnClick(){
}
}
}
</script>
<style scoped>
.title {
color: green;
}
</style>
Cpn.vue
<template>
<div>
<h3>我是NBA球星</h3>
<p>我是三分王，我是Curry</p>
<h3>{{name}}</h3>
</div>
</template>
<script>
export default {
name: "Cpn",
data(){
return{
name: 'hello Vue.js!!!'
}
}
}
</script>
<style scoped>
</style>
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack配置Vue</title>
</head>
<body>
<div id = "app">
</div>
<!--引入js檔案-->
<script src="dist/bundle.js"></script>
</body>
</html>
執行命令npm run build，執行成功！！！
1.6 認識plugin
plugin是什么？
- plugin是插件的意思，通常是用于對某個現有的架構進行擴展，
- webpack中的插件，就是對webpack現有功能的各種擴展，比如打包優化，檔案壓縮等等，
loader和plugin區別
- loader主要用于轉換某些型別的模塊，它是一個轉換器，
- plugin是插件，它是對webpack本身的擴展，是一個擴展器，
plugin的使用程序：
- 步驟一：通過npm安裝需要使用的plugins(某些webpack已經內置的插件不需要安裝)，
- 步驟二：在webpack.config.js中的plugins中配置插件，
1.6.1 打包html的plugin
HtmlWebpackPlugin插件具體作用
自動生成一個index.html檔案(可以指定模板來生成)，
將打包的js檔案，自動通過script標簽插入到body中，
安裝HtmlWebpackPlugin插件
cnpm install html-webpack-plugin --save-dev
安裝以后可以在package.json檔案中查看到版本號，
? 
修改webpack.config.js檔案
// 引入插件
const HtmlWebpackPlugin = require('html-webpack-plugin');
// 支持匯出
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js',
// publicPath: 'dist/'
}，
plugins: [
// 添加插件
new HtmlWebpackPlugin({
template: 'index.html'
}),
]
}
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack配置Vue</title>
</head>
<body>
<div id = "app">
</div>
</body>
</html>
使用命令 npm run build 執行操作，發現報錯！！！
解決方案！！！
HtmlWebpackPlugin插件版本太高了，將HtmlWebpackPlugin版本設定為2.0.0
? 
終端執行命令
cnpm install
操作結果
1.6.2 js壓縮的Plugin
安裝uglifyjs-webpack-plugin插件
cnpm install uglifyjs-webpack-plugin@1.1.1 --save-dev
修改webpack.config.js檔案
// 添加壓縮js插件
const UglifyjsWebpackPlugin = require('uglifyjs-webpack-plugin');
// 支持匯出
module.exports = {
entry: './src/main.js',
output: {
path: path.resolve(__dirname,'dist'),
filename:'bundle.js',
// publicPath: 'dist/'
},
plugins: [
new UglifyjsWebpackPlugin()
]
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/qianduan/281656.html
標籤：其他