Webpack

Webpack 是一個(gè)前端的靜態(tài)模塊資源打包工具，能讓瀏覽器也支持模塊化。它將根據(jù)模塊的依賴關(guān)系進(jìn)行靜態(tài)分析，然后將這些模塊按照指定的規(guī)則生成對(duì)應(yīng)的靜態(tài)資源。

Webpack 核心主要進(jìn)行 JavaScript 資源打包

如下圖，它可以結(jié)合其他插件工具，將多種靜態(tài)資源css、png、sass 分類轉(zhuǎn)換成一個(gè)個(gè)靜態(tài)文件，這樣可以減少頁(yè)面的請(qǐng)求?？杉?babel 工具實(shí)現(xiàn) EcmaScript 6 轉(zhuǎn) EcmaScript 5 ，解決兼容性問(wèn)題可集成 http 服務(wù)器可集成模塊熱加載，當(dāng)代碼改變后自動(dòng)刷新瀏覽器 等等功能

webpack1 和 webpack2+ 版本變化很大，基本上推倒重來(lái)， webpack1 目前已經(jīng)基本不用了。

webpack1 官網(wǎng) https://webpack.github.io/

webpack2.x 英文官網(wǎng) https://webpack.js.org/

webpack2.x 中文官網(wǎng) https://webpack.docschina.org/

webpack2.x 指南文檔：https://webpack.docschina.org/guides/

安裝最新版本

npm install --global webpack

或者 安裝特定版本

npm install --global webpack@

默認(rèn)情況下， 模塊化 JS 瀏覽器不能識(shí)別，可通過(guò) webpack 打包后讓瀏覽器識(shí)別模塊化 JS

全局安裝 webpack@v4.35.2 與 webpack-cli@3.3.6

npm i -g webpack@v4.35.2

npm i -g webpack-cli@3.3.6

查看全局安裝目錄

npm root -g

配置環(huán)境變量

查看webpack的版本

webpack -v

webpack小試

第一步寫一個(gè)bar.js

// nodejs里面的模塊代碼，web默認(rèn)不識(shí)別,node模塊化編程，導(dǎo)出一個(gè)函數(shù)

module.exports=function(){

console.log('我是bar模塊')

}

第二步寫一個(gè)main.js

var bar=require('./bar.js')

bar()

第三步寫一個(gè)index.html

Document

第四步測(cè)試index

很顯然web不能識(shí)別bar.js的代碼，需要使用到webpack進(jìn)行打包

我的VScode出了問(wèn)題，但是在cmd下面卻可以正常打包

引入新的打包的文件，并啟動(dòng)index.html

使用webpack命令打包

以前使用的命令

webpack ./js/main.js -o ./js/bunter.js

修改后的命令

webpack

在 webpack-demo2 目錄下創(chuàng)建 webpack.config.js 配置文件，該文件與 src 處于同級(jí)目錄

// 引用 Node.js 中的 path 模塊，處理文件路徑的小工具

const path = require("path");

// 1. 導(dǎo)出一個(gè)webpack具有特殊屬性配置的對(duì)象

module.exports = {

// 入口

entry: './src/main.js', // 入口模塊文件路徑

// 出口是對(duì)象

output: {

// path 必須是一個(gè)絕對(duì)路徑 , __dirname 是當(dāng)前js的絕對(duì)路徑：

D:\StudentProject\WebStudy\webpack-demo2

path: path.join(__dirname, './dist/'), // 打包的結(jié)果文件存儲(chǔ)目錄

filename: 'bundle.js' // 打包的結(jié)果文件名

}

}

和entry與output同級(jí)下添加一個(gè)mode組件，對(duì)應(yīng)的三個(gè)打包方式

production：生產(chǎn)環(huán)境，打包后的js是壓縮版的

development：開發(fā)環(huán)境，打包后的js不壓縮，易讀

將webpack由全局的打包轉(zhuǎn)換成局部的打包

本地安裝的時(shí)候，建議把 webpack 安裝到 devDependencies 開發(fā)依賴 ( --save-dev ) 中，因?yàn)?webpack 只是一個(gè)打包工具，項(xiàng)目如果需要上線，上線的是打包的結(jié)果，而不是這個(gè)工具。

所以我們?yōu)榱藚^(qū)分生產(chǎn)環(huán)境和開發(fā)環(huán)境依賴，通過(guò) --save (生產(chǎn)環(huán)境)和 --save-dev (開發(fā)環(huán)境)來(lái)區(qū)分。

1、為了測(cè)試本地安裝，先把全局安裝的 webpack 和 webpack-cli 卸載掉

npm uninstall -g webpack

npm uninstall -g webpack-cli

2. 安裝 webpack@v4.35.2 與 webpack-cli

cd d:\StudentProject\WebStudy\webpack-demo3

# 2. 初始化項(xiàng)目 `-y` 是采用默認(rèn)配置

npm init -y

# 3. 安裝 v4.35.2 ，不要少了 v

npm i -D webpack@v4.35.2

# 安裝 CLI

npm i -D webpack-cli@3.3.6

使用npm init-v命令就會(huì)生成一個(gè)package.json的文件，

里面的scripts則是填入命令行

scripts": {

"show": "webpack -v",

"start": "node ./src/main.js"，

"build": "webpack"

},

最后打包命令webpack也能用了

EcmaScript 6 Module規(guī)范導(dǎo)入導(dǎo)出非默認(rèn)成員

bar.js寫方法和變量

main.js導(dǎo)入的三種方法

webpack使用css-loader打包CSS資源

打包 CSS 資源

安裝 style-loader 和 css-loader 依賴

首先安裝相關(guān) Loader 插件：

css-loader 是 將 css 裝載到 javascript；

style-loader 是讓 javascript 認(rèn)識(shí) css。

npm install --save-dev style-loader css-loader

修改 webpack.config.js

// 引用nodejs里面的path模塊，處理文件路徑的小工具

const path = require("path")

// 導(dǎo)出一個(gè)有webpack具有特殊屬性的對(duì)象

module.exports = {

// production 模式打包后 bundle.js是壓縮版本的， development則不是壓縮的，production這個(gè)是生產(chǎn)環(huán)境

mode: 'development',

entry: './src/main.js',//入口的文件路徑

output: {//文件的出口

// path必須是一個(gè)絕對(duì)路徑，__dirname 是當(dāng)前js的絕對(duì)路徑

path: path.join(__dirname, './dist/'),

filename: 'bundle.js'

},

module: {

rules: [

{

test: /\.css$/,

use: [

//順序不要寫錯(cuò)了

'style-loader',//js轉(zhuǎn)化成css

'css-loader'//css轉(zhuǎn)化為js

]

}

]

}

}

注意點(diǎn)

這一塊是配置的webpack.config.js里面的打包c(diǎn)ss的代碼

注意： test: /\.css$/,這個(gè)沒(méi)有單引號(hào)，這個(gè)是一個(gè)正則表達(dá)式，如果放單引號(hào)就成了字符串

module: {

rules: [

{

test: /\.css$/,

use: [

//順序不要寫錯(cuò)了

'style-loader',//js轉(zhuǎn)化成css

'css-loader'//css轉(zhuǎn)化為js

]

}

]

}

添加css文件

建立一個(gè)css文件夾，并創(chuàng)建一個(gè)style.css文件

body {

background:red

}

在main.js中引入css

通過(guò)npm run build 自定義命令進(jìn)行打包

查看index.html

就是全紅色背景

webpack打包圖片

官網(wǎng)資料https://webpack.docschina.org/guides/asset-management/#加載-images-圖像

安裝 file-loader 依賴

npm install --save-dev file-loader

webpack.config.js里面添加打包圖片的插件

{

test: /\.(png|svg|jpg|gif)$/,

use: [

'file-loader'

]

}

修改style.css

body{

background: red;

background-image: url(./1.jpg)

}

打包編譯

npm run build

問(wèn)題

如果直接訪問(wèn)根目錄下的 index.html ，那么圖片資源路徑就無(wú)法訪問(wèn)到。

解決方案：就是把 index.html 放到 dist 目錄中。

但是 dist 是打包編譯的結(jié)果，而非源碼，所以把 index.html 放到 dist 就不合適。

而且如果我們一旦把打包的結(jié)果文件名 bundle.js 改了之后，則 index.html 也要手動(dòng)修改。

綜合以上遇到的問(wèn)題，可以使用一個(gè)插件： html-webpack-plugin 來(lái)解決。

如果出現(xiàn)打包后路徑問(wèn)題，圖片沒(méi)有展示出來(lái)，則把index.html移到相同的目錄下面

使用 HtmlWebpackPlugin 插件

作用：解決文件路徑問(wèn)題

將 index.html 打包到 bundle.js 所在目錄中

同時(shí)也會(huì)在 index.html 中自動(dòng)的

安裝插件

npm install --save-dev html-webpack-plugin

修改 webpack.config.js

plugins: [

new HtmlWebpackPlugin({

// 此插件作用是將 index.html 打包到 bundle.js 所在目錄中,

// 同時(shí)也會(huì)在 index.html 中自動(dòng)的

第三步在main.js中引入App.vue模塊和Vue操作代碼

import Vue from 'vue/dist/vue.js'

import App from'./App.vue'

new Vue({

el:'#app',

template:'',

components:{

App

}

})

導(dǎo)入完整版的Vue.js的解決辦法有兩種

一、引入的時(shí)候，引入vue.js 的路徑而不是直接的Vue

import Vue from 'vue/dist/vue.js'

new Vue({

el: '#app',

template: '',

components: {App}

})

二、引入Vue，然后在webpack.config.js里面加入配置

import Vue from 'vue'

import App from './App.vue'

new Vue({

el: '#app',

template: '',

components: {App}

})

module.exports = {

// 解析完整版 vue.js

resolve: {

alias: {

'vue$': 'vue/dist/vue.js'

}

}

}

總結(jié)

以上兩種方法都可以解決。但是完整版比運(yùn)行時(shí) vue 大，性能不如運(yùn)行時(shí) vue。

2. 官方更推薦運(yùn)行時(shí) vue，因?yàn)?vue-loader 可以編譯 .vue 文件，所以事實(shí)上是不需要 vue 的編譯功能的，

只需要渲染功能即可。

3. 而 template 自身沒(méi)有渲染功能，最終渲染底層都是通過(guò) render 函數(shù)夠?qū)崿F(xiàn)的。如果寫 template 屬性，則需

要編譯成 render 函數(shù)，這個(gè)編譯過(guò)程對(duì)性能會(huì)有一定損耗。

4. 所以使用運(yùn)行時(shí) vue 通過(guò) render 函數(shù)來(lái)渲染組件即可。

處理方法使用render函數(shù)

import Vue from 'vue'

// vue/dist/vue.js

import App from './App.vue'

new Vue({

el: '#app',

// vue-loder有編譯功能沒(méi)有渲染功能

// templete實(shí)質(zhì)上沒(méi)有編譯和渲染功能， 而當(dāng)前可以直接采用vue-loader進(jìn)行編譯

// 而渲染功能通過(guò)render函數(shù)進(jìn)行渲染組件

// template:'',

// render:function(h) {//h是一個(gè)函數(shù)，這個(gè)函數(shù)用于渲染組件

// // 函數(shù)的返回值就是渲染的結(jié)果

// return h(App)

// },

// 箭頭函數(shù)簡(jiǎn)寫一

// render:h=> {

// return h(App)

// },

// 箭頭函數(shù)簡(jiǎn)寫2

render: h => h(App)

// 如果使用了render，下面部分其實(shí)就可以省略了，默認(rèn)情況下就作為子組件

// components:{

// App

// }

})

組件的添加

添加Foo.vue組件

我是子組件

其中< style scoped>表示在當(dāng)前組件的樣子的渲染

jjjjjjjjj

{{msg}}

模塊熱替換(HMR)

介紹

模塊熱替換(hot module replacement 或 HMR)是 webpack 提供的最有用的功能之一。

模塊熱替換無(wú)需完全刷新頁(yè)面，局部無(wú)刷新的情況下就可以更新。

參考：https://webpack.docschina.org/guides/hot-module-replacement/

第一步安裝：要安裝了 webpack-dev-server 模塊

第二部按照文檔上面修改

// 引用nodejs里面的path模塊，處理文件路徑的小工具

const path = require("path")

const HtmlWebpackPlugin = require('html-webpack-plugin');

//引入Vue打包的插件

const VueLoaderPlugin = require('vue-loader/lib/plugin')

const webpack = require('webpack');

// 導(dǎo)出一個(gè)有webpack具有特殊屬性的對(duì)象

module.exports = {

// production 模式打包后 bundle.js是壓縮版本的， development則不是壓縮的，production這個(gè)是生產(chǎn)環(huán)境

mode: 'development',

entry: './src/main.js',//入口的文件路徑

output: {//文件的出口

// path必須是一個(gè)絕對(duì)路徑，__dirname 是當(dāng)前js的絕對(duì)路徑

path: path.join(__dirname, './dist/'),

filename: 'bundle.js'

},

plugins: [

new HtmlWebpackPlugin({

// title: '管理輸出'

template: './index.html'

}),

// v-loader請(qǐng)確保引入這個(gè)插件！

new VueLoaderPlugin(),

//模塊熱加載

new webpack.HotModuleReplacementPlugin()

],

// 實(shí)時(shí)重新加載

devServer: {

contentBase: './dist',

hot: true

},

module: {

rules: [

{

// 注意這里不要使用單引號(hào)，這里是一個(gè)正則表達(dá)式

test: /\.css$/,

use: [

//順序不要寫錯(cuò)了

'style-loader',//js轉(zhuǎn)化成css

'css-loader'//css轉(zhuǎn)化為js

]

},

{

test: /\.(png|svg|jpg|gif)$/,

use: [

'file-loader'

]

},

// 解決兼容性問(wèn)題

{

test: /\.m?js$/,

exclude: /(node_modules|bower_components)/, // 排除的目錄

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env'] // 內(nèi)置好的轉(zhuǎn)譯工具

}

}

},

{

test: /\.vue$/,

loader: 'vue-loader'

}

]

}

}

這樣修改了哪里的內(nèi)容，就局部的刷新，上面的localhost:8080這個(gè)是不用刷新的

總結(jié)

以上是生活随笔為你收集整理的webpack html转成js,WebPack的基础学习的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。