webpack插件生成js文件（webpack壓縮代碼插件）

本文目錄一覽：

• 1、使用 webpack 打包 js
• 2、WebPack打包React項目, 減小打包後生成的js文件.
• 3、webpack 額外輸出JS文件？
• 4、webpack打包原理
• 5、webpack基本使用

使用 webpack 打包 js

通過 命令行工具打包: webpack app.js bundle.js; 打包完成後會在同目錄下生成bundle.js.

app.js: 入口文件;

bundle.js: 打包好的文件。

通過amd規範定義的, 打包後會生成一個bundle.js 和 一個 1.bundle.js， 兩個bundle.js 文件

WebPack打包React項目, 減小打包後生成的js文件.

Warning: It looks like you』re using a minified copy of the development build of React. When deploying React apps to production, make sure to use the production build which skips development warnings and is faster. See for more details.

“`

這裡分別把 使用的 react , react-dom , jquery , react-router , 第三方庫提了出來單獨生成文件vendor.js

首先安裝依賴: extract-text-webpack-plugin ,

之後在webpack中進行配置

**注意: ** 例子中配置中 {publicPath: ‘./’} 不是必填項, 我這裡是為了解決背景圖片打包或路徑不正確的問題, 具體請查看

webpack 額外輸出JS文件？

webpack配置如下：

…

const ExtractTextPlugin = require(‘extract-text-webpack-plugin’)

module.exports = {

…

output: {

path: path.join(__dirname, ‘./dist’),

filename: ‘js/[name].js’,

publicPath: ‘/dist/’

},

module: {

loaders: [

…

{

test: /\.css$/,

loader: ExtractTextPlugin.extract({

fallbackLoader: ‘style’,

loader: ‘css’,

publicPath: ‘../’

})

},

]

},

plugins: [

…

new ExtractTextPlugin({

filename: ‘css/[name].css’,

disable: false,

allChunks: false

})

]

}

webpack打包原理

webpack 是一個現代 JavaScript 應用程序的靜態模塊打包器(module bundler)。當 webpack 處理應用程序時，它會遞歸地構建一個依賴關係圖(dependency graph)，其中包含應用程序需要的每個模塊，然後將所有這些模塊打包成一個或多個 bundle

webpack.config.js里配置

webpack.config.js里配置

webpack loader 將所有類型的文件，轉換為應用程序的依賴圖可以直接引用的模塊

通過require()將想要使用的插件添加到plugins數組中,多數插件可以通過選項(option)自定義。你也可以在一個配置文件中因為不同目的而多次使用同一個插件，這時需要通過使用 new 操作符來創建它的一個實例。

npm init -y

安裝webpack

npm i webpack_dome webpack-cli -D

在根目錄下新建src文件夾,在src里新建index.js文件

index.js文件

創建並配置webpack.config.js文件

webpack.config.js文件

配置 package.json 文件，在scripts中添加’build’使得運行 npm run build 可以直接執行 webpack 命令,在根目錄內會生成dist文件夾,裡面是對應生成的文件,

安裝 npm install –save-dev express webpack-dev-middleware ,添加’start’使得運行 npm run start 可以直接執行 webpack-dev-server 命令,

package.json 文件

再次打包時需要刪除舊文件

執行 npm install clean-webpack-plugin –save-dev 命令，安裝依賴。

修改webpack.config.js文件配置

新建index.html文件,並手動引入打包後的js文件

執行 npm i html-webpack-plugin –save-dev 命令，安裝依賴。

新建index.ejs文件

修改webpack.config.js文件配置

重新運行 npm run build，生成新的 dist 包，包內會生成一個新的 index.html 文件，並自動引入了 index.min.js 文件。

執行 npm i open-browser-webpack-plugin webpack-dev-server –save-dev 命令，安裝依賴。

修改 webpack.config.js 配置

修改webpack.config.js文件配置

webpack基本使用

step1: 創建一個項目錄

注意：項目名一般 不要帶中文

step2: 創建 package.json

或者：

step4: 處理第三方文件

html文件中需要引入多個js文件或者第三方模塊(例如：jquery.js)，只引入項目js入口文件( main.js ),其他js文件均在入口文件中導入。導致可能JS文件中使用了瀏覽器不識別的高級語法:

總結：webpack可以做兩件事情況：

step5: 配置入口文件和出口文件

每次修改js文件，手動輸入命令： webpack 入口文件路徑 -o 出口文件路徑 重新打包， 每次都要輸入入口文件和出口文件，麻煩。可以在項目目錄下建立配置文件 webpack.config.js ,指定入口文件和出口文件:

重新打包：

step6: 實現自動打包編譯

每次修改js文件，都要手動重新打包，還是麻煩？使用 webpack-dev-server 這個工具，來實現自動打包編譯的功能。

webpack-dev-server 這個工具，如果想要正常運行，要求在本地項目中必須安裝 webpack

在 package.json 文件中配置命令：

在終端中執行命令：

註：在終端執行 npm run dev ，就等於執行 webpack-dev-server 命令。這將在node中開啟一個伺服器，並且立即打包。每次修改文件，ctrl + s 保存文件,webpack-dev-server工具自動監聽文件改變，並且自動打包。

改變文件引用路徑：

執行上述命令後終端會有類似信息輸出：

【 Project is running at 】——webpack-dev-server工具將項目託管到localhost:8080/埠上

【webpack output is served from /】——打包好的文件通過localhost:8080/bundle.js訪問

【Content not from webpack is served from C:\Users\yfb\Desktop\前端學習案例4.27\wabpack\Demo_1\src】——不是通過webpack打包的文件，則是以src為根目錄訪問。

該項目根目錄下並不存在bundel.js文件，我們可以認為webpack-dev-server把打包好的文件，以一種虛擬的形式託管到了咱們項目的根目錄中，雖然我們看不到它，但是可以認為和 dist、src、node_modules平級，有一個看不見的文件，叫做 bundle.js。其實是為了頻繁打包，提高效率，直接把打包的文件放在內存中。

因為項目託管到新伺服器，現在應該訪問的是 該伺服器 下的項目，文件引用路徑也要改變:

step7: 自動打開瀏覽器進行訪問、配置埠號、指定託管的根目錄、熱重載（只是修改補丁，不重新生成整個bundle.js文件）

在 package.json 中配置命令，並重啟伺服器：

step8: 使用 html-webpack-plugin 插件

使用 –contentBase 指令的過程比較繁瑣，需要指定啟動的目錄，同時還需要修改index.html中script標籤的src屬性。

安裝 html-webpack-plugin 插件：

在 webpack.config.js 配置文件中配置插件：

html-webpack-plugin 插件的兩個作用：

step9: 處理樣式文件

html文件中需要引入css、less、sass樣式文件。默認情況下，webpack處理不了這些樣式文件。

處理css文件：

處理less樣式文件