Webpack

Webpack 是一個前端的靜態模塊資源打包工具，能讓瀏覽器也支持模塊化。它將根據模塊的依賴關系進行靜態分析，然后將這些模塊按照指定的規則生成對應的靜態資源。

Webpack 核心主要進行 JavaScript 資源打包

如下圖，它可以結合其他插件工具，將多種靜態資源css、png、sass 分類轉換成一個個靜態文件，這樣可以減少頁面的請求。可集成 babel 工具實現 EcmaScript 6 轉 EcmaScript 5 ，解決兼容性問題可集成 http 服務器可集成模塊熱加載，當代碼改變后自動刷新瀏覽器 等等功能

webpack1 和 webpack2+ 版本變化很大，基本上推倒重來， webpack1 目前已經基本不用了。

webpack1 官網 https://webpack.github.io/

webpack2.x 英文官網 https://webpack.js.org/

webpack2.x 中文官網 https://webpack.docschina.org/

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

安裝最新版本

npm install --global webpack

或者 安裝特定版本

npm install --global webpack@

默認情況下， 模塊化 JS 瀏覽器不能識別，可通過 webpack 打包后讓瀏覽器識別模塊化 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

配置環境變量

查看webpack的版本

webpack -v

webpack小試

第一步寫一個bar.js

// nodejs里面的模塊代碼，web默認不識別,node模塊化編程，導出一個函數

module.exports=function(){

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

}

第二步寫一個main.js

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

bar()

第三步寫一個index.html

Document

第四步測試index

很顯然web不能識別bar.js的代碼，需要使用到webpack進行打包

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

引入新的打包的文件，并啟動index.html

使用webpack命令打包

以前使用的命令

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

修改后的命令

webpack

在 webpack-demo2 目錄下創建 webpack.config.js 配置文件，該文件與 src 處于同級目錄

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

const path = require("path");

// 1. 導出一個webpack具有特殊屬性配置的對象

module.exports = {

// 入口

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

// 出口是對象

output: {

// path 必須是一個絕對路徑 , __dirname 是當前js的絕對路徑：

D:\StudentProject\WebStudy\webpack-demo2

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

filename: 'bundle.js' // 打包的結果文件名

}

}

和entry與output同級下添加一個mode組件，對應的三個打包方式

production：生產環境，打包后的js是壓縮版的

development：開發環境，打包后的js不壓縮，易讀

將webpack由全局的打包轉換成局部的打包

本地安裝的時候，建議把 webpack 安裝到 devDependencies 開發依賴 ( --save-dev ) 中，因為 webpack 只是一個打包工具，項目如果需要上線，上線的是打包的結果，而不是這個工具。

所以我們為了區分生產環境和開發環境依賴，通過 --save (生產環境)和 --save-dev (開發環境)來區分。

1、為了測試本地安裝，先把全局安裝的 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. 初始化項目 `-y` 是采用默認配置

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命令就會生成一個package.json的文件，

里面的scripts則是填入命令行

scripts": {

"show": "webpack -v",

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

"build": "webpack"

},

最后打包命令webpack也能用了

EcmaScript 6 Module規范導入導出非默認成員

bar.js寫方法和變量

main.js導入的三種方法

webpack使用css-loader打包CSS資源

打包 CSS 資源

安裝 style-loader 和 css-loader 依賴

首先安裝相關 Loader 插件：

css-loader 是 將 css 裝載到 javascript；

style-loader 是讓 javascript 認識 css。

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

修改 webpack.config.js

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

const path = require("path")

// 導出一個有webpack具有特殊屬性的對象

module.exports = {

// production 模式打包后 bundle.js是壓縮版本的， development則不是壓縮的，production這個是生產環境

mode: 'development',

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

output: {//文件的出口

// path必須是一個絕對路徑，__dirname 是當前js的絕對路徑

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

filename: 'bundle.js'

},

module: {

rules: [

{

test: /\.css$/,

use: [

//順序不要寫錯了

'style-loader',//js轉化成css

'css-loader'//css轉化為js

]

}

]

}

}

注意點

這一塊是配置的webpack.config.js里面的打包css的代碼

注意： test: /\.css$/,這個沒有單引號，這個是一個正則表達式，如果放單引號就成了字符串

module: {

rules: [

{

test: /\.css$/,

use: [

//順序不要寫錯了

'style-loader',//js轉化成css

'css-loader'//css轉化為js

]

}

]

}

添加css文件

建立一個css文件夾，并創建一個style.css文件

body {

background:red

}

在main.js中引入css

通過npm run build 自定義命令進行打包

查看index.html

就是全紅色背景

webpack打包圖片

官網資料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

問題

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

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

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

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

綜合以上遇到的問題，可以使用一個插件： html-webpack-plugin 來解決。

如果出現打包后路徑問題，圖片沒有展示出來，則把index.html移到相同的目錄下面

使用 HtmlWebpackPlugin 插件

作用：解決文件路徑問題

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

同時也會在 index.html 中自動的

安裝插件

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

修改 webpack.config.js

plugins: [

new HtmlWebpackPlugin({

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

// 同時也會在 index.html 中自動的

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

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

import App from'./App.vue'

new Vue({

el:'#app',

template:'',

components:{

App

}

})

導入完整版的Vue.js的解決辦法有兩種

一、引入的時候，引入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'

}

}

}

總結

以上兩種方法都可以解決。但是完整版比運行時 vue 大，性能不如運行時 vue。

2. 官方更推薦運行時 vue，因為 vue-loader 可以編譯 .vue 文件，所以事實上是不需要 vue 的編譯功能的，

只需要渲染功能即可。

3. 而 template 自身沒有渲染功能，最終渲染底層都是通過 render 函數夠實現的。如果寫 template 屬性，則需

要編譯成 render 函數，這個編譯過程對性能會有一定損耗。

4. 所以使用運行時 vue 通過 render 函數來渲染組件即可。

處理方法使用render函數

import Vue from 'vue'

// vue/dist/vue.js

import App from './App.vue'

new Vue({

el: '#app',

// vue-loder有編譯功能沒有渲染功能

// templete實質上沒有編譯和渲染功能， 而當前可以直接采用vue-loader進行編譯

// 而渲染功能通過render函數進行渲染組件

// template:'',

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

// // 函數的返回值就是渲染的結果

// return h(App)

// },

// 箭頭函數簡寫一

// render:h=> {

// return h(App)

// },

// 箭頭函數簡寫2

render: h => h(App)

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

// components:{

// App

// }

})

組件的添加

添加Foo.vue組件

我是子組件

其中< style scoped>表示在當前組件的樣子的渲染

jjjjjjjjj

{{msg}}

模塊熱替換(HMR)

介紹

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

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

參考：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');

// 導出一個有webpack具有特殊屬性的對象

module.exports = {

// production 模式打包后 bundle.js是壓縮版本的， development則不是壓縮的，production這個是生產環境

mode: 'development',

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

output: {//文件的出口

// path必須是一個絕對路徑，__dirname 是當前js的絕對路徑

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

filename: 'bundle.js'

},

plugins: [

new HtmlWebpackPlugin({

// title: '管理輸出'

template: './index.html'

}),

// v-loader請確保引入這個插件！

new VueLoaderPlugin(),

//模塊熱加載

new webpack.HotModuleReplacementPlugin()

],

// 實時重新加載

devServer: {

contentBase: './dist',

hot: true

},

module: {

rules: [

{

// 注意這里不要使用單引號，這里是一個正則表達式

test: /\.css$/,

use: [

//順序不要寫錯了

'style-loader',//js轉化成css

'css-loader'//css轉化為js

]

},

{

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

use: [

'file-loader'

]

},

// 解決兼容性問題

{

test: /\.m?js$/,

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

use: {

loader: 'babel-loader',

options: {

presets: ['@babel/preset-env'] // 內置好的轉譯工具

}

}

},

{

test: /\.vue$/,

loader: 'vue-loader'

}

]

}

}

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

總結

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

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。