包含webpackapp.js的詞條

本文目錄一覽：

• 1、使用 webpack 打包 js
• 2、關於webpack替換文件hash的問題，有人有過這方面經驗嗎
• 3、使用webpack4從0開始打包一個antd項目

使用 webpack 打包 js

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

app.js: 入口文件;

bundle.js: 打包好的文件。

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

關於webpack替換文件hash的問題，有人有過這方面經驗嗎

首次使用Webpack, 用CLI, 即Command Line Interface

→ 確認是否安裝了NodeJS

npm -v

→ 安裝 Webpack

npm install webpack -g

→ 創建一個簡單的網站

…..webpacktest/

……….app.js

……….index.html

→ 導航到webpacktest所在文件夾

→ 對app.js文件使用webpack

webpack ./app.js bundle.js

→ 我們看到在webpacktest目錄下多了一個bundle.js文件

→ 現在，可以在index.html中引用bundle.js文件，而不是app.js文件

■ 在項目中添加配置文件

→ 在項目根目錄下創建名稱為webpack.config.js文件

當設置好webpack.config.js文件後，每次我們導航到項目，只要使用webpack這一個命令就可以使用各項功能了。

module.exports = {

entry: “./app.js”,

output: {

filename: “bundle.js”

}

}

→ 命令行來到需要Webpack的網站下

→ 直接輸入webpack命令

webpack

■ 啟用Webpack觀察者模式

當webpack.config.js的配置發生變化，如果每次都要手動輸入webpack命令來生成js文件的話，顯得相對麻煩一些。Webpack為我們提供了觀察者模式，啟用後，任何的webpack.config.js中的變化將接受觀察，自動生成最終的js文件。

→ 命令行來到需要Webpack的網站下

→ 啟用觀察者模式

webpack –watch

→ 在webpack.config.js中添加watch欄位，並設置成true

module.exports = {

entry: “./app.js”,

output: {

filename: “bundle.js”

},

watch: true

}

→ 這樣，每次修改保存webpack.config.js中引用文件，bundle.js的文件會自動更新。

■ 安裝啟用Webpack DevServer

→ 導航到目標網站目錄

→ 輸入npm命令安裝Webpack DevServer

npm install webpack-dev-server -g

→ 輸入webpack-dev-server命令

webpack-dev-server

→ 看到大致如下內容

webpack result is served from /

cotent is served from D:\…

Hash:…

Version:webpack1.12.4

Time:94ms

…

webpack: bundle is now VALID.

→ 在瀏覽器中輸入：

同時顯示app.js文件中console.log和document.write的內容。

→ 修改webpack.config.js中依賴的文件並保存，瀏覽器中的內容就會自動更新

→ 如果不想顯示console.log內容呢？

→ 在瀏覽器中輸入：

→ 此時，再修改webpack.config.js中依賴的文件並保存，瀏覽器的內容卻不會更新？

→ 再次回到命令行，加入一個inline的flag

webpack-dev-server –inline

→ 此時，如果修改webpack.config.js中依賴的文件並保存，瀏覽器中的內容就會自動更新了☺

■ Bundling多個文件

→ 在項目下再添加一個login.js文件

console.log(‘login loaded’);

→ app.js中引用login.js文件

require(‘./login’);

document.write(“Welcome to Big Hair Concerts!!Baby”);

console.log(‘App loaded’);

→ 在瀏覽器中輸入：

可以看到變化。

→ 在項目下再添加一個utils.js文件

console.log(‘logging from the utils.js file…’);

→ 來到webpack.config.js下配置如下：

module.exports = {

entry: [“./utils”,”./app.js”],

output: {

filename: “bundle.js”

},

watch: true

}

→ 命令行導航到當前項目下

→ 重新啟用Webpack DevServer

webpack-dev-server

→ 在中體現了相應的變化

使用webpack4從0開始打包一個antd項目

$ npm install -g cnpm –registry= // 安裝cnpm

$ mkdir project // 根目錄下創建一個名為project的文件夾

$ cd project cnpm init // 進入project文件夾 並初始化該項目 終端會提示一些配置，一路鍵入enter最後yes即可。 初始化完成會生成一個pakage.json文件

$ cnpm i –D webpack webpack-dev-server webpack-cli // webpack4.x 必須安裝webpack-cli。

根目錄下新建文件src/index.js

$ npm run build // 此時我們可以執行npm run build 代替npx webpack。 構建成功後根目錄下自動生成 dist/main.js。

為什麼我們沒有對webpack進行任何配置，卻可以成功打包？那是因為在沒有配置入口文件的情況下， webpack 4.x會自動查找src/index.js作為入口文件進行打包。

這裡我們需要了解webpack4個核心概念——入口(entry)、輸出(output)、loader、插件(plugins)。

根目錄下創建webpack.config.js

$ cnpm run build

我們可以看到根目錄下打包出了dist/main.js。

這時候如果我們將webpack.config.js中入口配置改為

$ cnpm run build

重新構建我們發下dist目錄下多出了一個app.js文件，上一次打包的main.js還在，如果我們希望每次打包之前先清除掉上一次的打包文件，則需要用到clean-webpack-plugin插件。

$ cnpm i -D clean-webpack-plugin // vesion: 6.13.4 (6.x版本與低版本引入方式不一樣)

安裝後我們在webpack.config.js里進行配置 。

首先引入clean-webpack-plugin

再在plugins里實例化

$ cnpm run build

重新構建，我們可以看到上一次打包出的dist/app.js已經刪掉了。

首先我們在dist目錄下手動增加一個index.html文件，引入main.js

在chrome中打開該html文件，我們可以看到控制台中成功列印出hello world

那麼問題來了，難道我們每次打包需要手動在dist目錄下添加一個html文件嗎？ 顯然不可能，這時候我們需要用到html-webpack-plugin插件自動添加html文件。

我們先將dist/index.html文件移動到src下，去掉script標籤。

$ cnpm i -D html-webpack-plugin

安裝好後一樣先引入插件 具體插件配置參考官網

$ cnpm run build

此時我們看到dist目錄下自動生成了一個index.html文件，裡面包含了div id=”root”/div,

這是因為我們在模板文件里寫過。之前我們已經安裝過了webpack-dev-server，並在package.json腳本里配置了”dev”: “webpack-dev-server” 此時我們可以運行

$ cnpm run dev

終端提示自動運行在localhost:8080, chrome上打開8080埠，查看控制台，我們可以看到列印出了hello world。

$cnpm run dev

這時我們可以看到該項目已經運行在我們制定的埠8989上了。

$ cnpm i -D style-loader css-loader less-loader file-loader url-loader

我們在src目錄下新建一個images文件夾，然後拖入一張圖片，這裡圖片名用了smokinggirl.jpeg。 再在src目錄下新建一個index.less文件。

然後修改src/index.js src/index.less

src/index.less

webpack.config.js中module部分增加配置

$ cnpm run dev

可以看到有一個寬200px的圖片顯示出來。

這樣打包出來的css 樣式會作用到全局，如果頁面多可能會相互影響，這時候我們可以啟用css模塊，配置稍作修改

src/index.js

$cnpm run dev

這時候我們可以看到圖片成功顯示出來，但仔細觀察圖片類名，是一串自動生成的字元，與我們自己定義的類名沒有半點關係，那麼如何顯示出我們定義的類名呢？

$ cnpm run dev 這時候可以看到打包出的類名符合我們定義的形式。

但仔細觀察，我們發現body還有默認樣式，我們可以在index.html引入一個公共樣式文件，去除默認樣式。

src目錄下 新建common/reset-style.css, 寫個簡單的去默認樣式的文件

然後在html模板文件 src/index.html中引入，

這時候我們運行，發現報錯找不到該文件。這是因為我們在index.html里引入該文件，但webpack沒有打包編譯。這時候我們需要用到插件copy-webpack-plugin

$ cnpm i -D copy-webpack-plugin

重新運行，我們可以看到原先的默認樣式body的邊距已經沒有了。

$ npm i -S react react-dom

安裝完react、react-dom 還不夠，我們需要babel做翻譯，才能讓瀏覽器讀懂。

$ cnpm i -D babel-loader @babel/core @babel/preset-env @babel/preset-react @babel/plugin-transform-runtime @babel/runtime-corejs2

安裝好後根目錄新建.babelrc文件。

webpack.config.js 的module里增加babel-loader的配置

配置好我們來寫react文件

新建src/page/content/index.js, 將src下的index.less拖入content目錄下。

接下來改造src/index.js 入口文件

然後運行 我們可以看到頁面正常顯示。到這裡我們已經可以正確打包並運行react項目了。

$ cnpm i -S antd

根據antd官網描述，我們還需要在入口文件引入一個樣式文件。

src/index.js

到這裡我們可以發現一個問題，我們對css文件打包的時候啟用了模塊，很明顯這樣直接引用是不行的。 antd的樣式是從node_modules里引用的，那麼我們的思路就是打包css文件時去除掉node_modules裡面的文件再啟用模塊，node_modules裡面的文件不啟用模塊。

接下來我們對webpack.config.json進行改造。

只有這樣還不夠，我們需要用到babel-plugin-import插件實現按需載入，antd樣式應用到全局需要用到此插件。

$cnpm i -D babel-plugin-import

.babelrc

ok現在我們來改造一下src/page/content/index.js文件，引入一個antd組件。

現在我們來運行，發現報了個錯

提示我們需要安裝一個@babel/plugin-proposal-class-properties插件。

$ cnpm i -D @babel/plugin-proposal-class-properties

然後我們需要在babel的配置文件中加入它

現在我們重新運行 $ cnpm run dev 一個簡單的包含antd組件的頁面就完成了。

。