webpack4json配置,webpack的packagejson文件配置

本文目錄一覽：

• 1、webpack的配置文件
• 2、webpack4 配置之 postcss-loader
• 3、webpack的打包配置-1修改版
• 4、webpack簡單配置，路由配置，介面攔截配置，基本文件配置
• 5、webpack配置
• 6、使用webpack4從0開始打包一個antd項目

webpack的配置文件

webpack 的默認配置文件是 webpack.config.js ,所以在我們的項目根目錄下(02webpack-demo)新建一個webpack.config.js的文件，裡面啥都不寫，這個時候我們在終端中運行 npx webpack ,就會在根目錄下生成一個 dist 文件夾，裡面有一個 main.js ，這是 webpack 利用默認的配置項為我們打包生成的文件,接下來我們來簡單配置一下這個文件裡面的內容:

配置好文件後，再次運行 npx webpack ,這個時候在我們的項目目錄下就生成了一個 bundle 文件夾，裡面有一個 bundle.js 就是 webpack 幫我們翻譯好的文件了，在我們的 demo.html 中引入 bundle.js ，在瀏覽器中打開 demo.html 文件，可以看到我們列印的內容已經正確的出現在了瀏覽器控制台中了。

我們已經知道了 webpack 的默認配置文件的名字是 webpack.config.js ，那麼有沒有辦法修改這個名字呢？比如我想把這個名字改為 test.config.js 或者其他什麼名字，答案是有的，比如我改成了 test.js ，那麼在利用 webpack 進行打包的時候就應該運行 npx webpack –config test.js ，打包結果和上面的還是一樣的.

在上面的打包過程中，每次打包的時候都要執行 npx webpack 或者 npx webpack –config test.js ,你可能會覺得有點繁瑣，我們可以在 package.json 中的 scripts 中配置一個腳本，如下所示:

配置好腳本之後，在終端中執行 npm run bundle 這個命令， webpack 就會重新幫我們打包文件，這裡涉及到的知識點是 npm scripts ,它的原理是當我們在終端中執行 npm run bundle 的時候，實際上在運行的就是 package.json 配置中的 bundle 這個命令，而 bundle 這個命令的底層就是在幫我們執行 webpack 這個命令，這裡有一個點需要注意，如果我們在 scripts 中以命令的形式去執行 webpack 的時候，首先會在工程目錄下的 node-modules 下去找是否安裝了 webpack ，如果安裝了的話就會直接使用 node-modules 中的 webpack ,但是如果 node-modules 下面沒有 webpack ,就會去全局尋找 webpack

1.全局安裝的 webpack ,打包的之後在終端中運行 webpack index.js

2.局部安裝的 webpack ，打包的之後在終端中運行 npx webpack index.js

3.通過配置 npm scripts 腳本，打包的之後在終端中運行 npm run 你配置的腳本的內容 ，比如我配置的腳本為:

那麼在打包的時候運行 npm run test 即可

webpack4 配置之 postcss-loader

postcss-loader 是我們在做項目的時候大多數都會用到的loader之一，它負責進一步處理 CSS 文件，比如添加瀏覽器前綴，壓縮 CSS 等。

1.首先添加 browserslist ，

方法一：在項目根目錄添加 .browserslistrc 文件

方法二：在 package.json 文件中添加 browserslist

2.配置 autoprefixer

方法一：在根目錄創建 postcss.config.js：

方法二：在 webpack.config.js 中配置：

方法一： postcss.config.js （推薦）

方法二：webpack.config.js 配置

1.使用 style-loader ：

2.使用 MiniCssExtractPlugin

webpack的打包配置-1修改版

1、現在本地創建項目目錄

2、然後在index.html中寫入html的結構

3、想要先安裝jquery，先npm init -y一下， npm install jquery -S 【項目目錄安裝，必須是小寫的jquery，否則會報錯】，在index.html引入main.js

4、在main.js中寫入內容如下：

使用webpack處理一下，轉換成瀏覽器可以識別的文件 ：

a: 先全局安裝一下webpack= npm install webpack@3.5.5 -g

b: 在終端中執行： webpack ./src/main.js【要處理的文件的目錄】 ./dist/bundle.js【要輸出的文件的目錄以及文件名】 ，會在dist中生成一個bundle.js文件，然後在 index.html中引入的main.js文件改成 bundle.js

這樣的話每次打包時候都需要執行 webpack ./src/main.js ./dist/bundle.js

c: 為了不手動指定入口和出口文件，在項目根目錄中新建一個webpack.config.js（基於node的，所以** **node.js的命令都可以識別）

這樣的話，就可以在終端中直接執行命令：webpack就可以直接打包了，但是還有個小問題。就是它不 會自動更新，需要手動刷新一下。下面我們就來解決這個問題。來配置webpack-dev-server

4、使用webpack-dev-server實現自動打包編譯

直接安裝webpack最高版本的時候，可能會遇到報錯的情況，如果對於版本沒有要求的話，可以降低版本：

npm install webpack@3.5.5 -D 如果還會有報錯出現的話，可以試試使用cnpm安裝

需要先在終端中安裝webpack-dev-server：具體操作如下：

4.1 npm/cnpm install webpack-dev-server -D 出現下面的提示：【其實此步驟容易出現報錯，所以呢，把webpack-dev-server版本修改為@2.9.1=webpack-dev-server@2.9.1時，就不會報錯】

4.2 npm/cnpm install webpack -D 【此步驟也是容易出錯的，所以安裝的時候要和上邊的版本保持一致，webpack@3.5.5版本】

4.3 需要在package.json中配置dev

最後直接執行：npm run dev運行成功，但是需要注意的是此時打包成的bundle.js文件不是磁碟中存在bundle.js文件，而是一個與src dist node_module同級的看不見的文件，在index.html引入的路徑也要修改以下=》script src=”/bunlde.js”/script

此時，正常打包，但是不自動打開瀏覽器

發布出來，方便自己查看，有什麼不對的地方，希望留言糾正修改。（程序員菜鳥一枚）

webpack簡單配置，路由配置，介面攔截配置，基本文件配置

新建項目

  項目腳手架搭建  react

     相關文件

        webpack.config.js

           使用相關插件

              path

              html-webpack-plugin

                html文件處理插件

              clean-webpack-plugin

                清除上次打包文件插件

              copy-webpcak-plugin

                 打包時需要複製的相關文件的插件（比如一些報表文件模版）

              speed-measure-webpack-plugin

                 速度測量插件  （const  SpeedMeasurePlugin = require(“speed-measure-webpack-plugin”);  const smp = new SpeedMeasurePlugin();  const webpackConfig = smp.wrap({}）

              happypack

                一些loader進程管理

              打包配置

                 {

mode:』環境設置』，

  entry：『入口文件設置』，

  output：｛path：path.resovle(__dirname,』dist』),filename:』main_[hash].js』,publicPath:』根據環境設置url前綴（介面域名代理字元）』｝，

  models：｛rules：［

說明：｛

  test：『正則匹配／.js／』

  exclude：『排除。。。（可以設置後綴名或者文件路徑）』

  include：『包含。。。（可以設置後綴名或者文件路徑）』

  loader：『loader設置url－loader』或者use：［loader：『  』，oprios：｛plugins：［插件設置］或者其他設置｝］（use［可以設置happy pack插件：happypack/loader ? id = 『happypack插件配置的id』］）

｝

］｝，（loader配置）

    （loader配置順序：如，url-loader,babel-loader,style-loader,css-loader,file-loader）

  resolve：｛extensions：［』js』,』json』,』jsx』,』css』］｝，（在導入沒有帶後綴名的文件時，嘗試在文件加入上面後綴名訪問）

  plugins：［］    （插件配置）

}

        bable.config.js

           相關插件  (用法function(api){ api.cache(true);

              presets：［

[『@babel/preset-env』，

                 {『targets』：｛』browsers』:[“last 2 versions」,”safari = 7」,」ie =9」,」chrome =49」]｝}

],

                 ‘@babel/preset－react』

    ］，

              return { 「plugins」:{

      [“@babel/plugin-proposal-decorators”, { “legacy”: true }],(類裝飾器  舊：設置legacy時需要loose支持，有順序)

               @babel/plugin-proposal-dynamic-import, （ import 處理插件）

               @bacel/plugin-transform-runtime，（將helper和polypill都改為從一個統一的地方引入，引入的對象和全局變數完全隔離）

[“@babel/plugin-proposal-class-properties”, { “loose” : true }],(解析類的屬性)

               @ babel / plugin-proposal-logic-assignment-operators, （如出現短路時的邏輯處理插件）

               [”@babel/plugin-proposal-optional-chaining”,{loose:false}],(可選鏈優化  深層嵌套優化處理插件)               

               [”@babel/plugin-proposal-pipeline-operator”,{proposal:’minimal』}],(解析管道運算符)

               [‘@babel/plugin-proposal-nullish-coalescing-operator”,{loose：false}]，（刪除無效的合併運算符）

      @ babel / plugin-proposal-do-expressions,( 插件執行一個 do ｛多個條件語句｝表達式，最終語句完成值是該 do 表達式的完成值 )

      @ babel / plugin-transform-spread ，（擴展運算符轉換插件）

      [“@babel/plugin-proposal-object-rest-spread”, { “loose”: true, “useBuiltIns”: true }],(轉擴展運算插件)

      [“@babel/plugin-transform-object-assign」]，（插件支持Object.assign()）

    ［「import」，｛libraryName: ‘antd’,libraryDirectory: ‘es’,style: true,｝］（and按需引入設置）

} }})

        package.json

           項目打包／啟動相關插件

              webpack－dev－server

              webpack－cli

              webpack－merga

      cross-env  (插件解決window系統兼容問題)

        postcss.config.js

            可以做相關的瀏覽器版本兼容配置

            相關插件

               autoprefixer（｛prefer：false，plugin：loader=[request(autoprefixer)({browsers:[『ie』=9,』Safari』=6]})]｝｝）

      public文件

        一些公用文件存放

      dist文件（打包後的文件）

      src文件（項目主文件）

        assets文件（存放圖片等資源）

        api相關文件（api介面處理文件）

        modules文件或者pages文件

      （store文件）

        utils文件

          request.js（axios攔截文件）

             （相關插件）axios、history（使用：引入createBrowserHistory（現代瀏覽器使用）、createMemoryHistory（手機端使用））createBrowserHistory（｛basename：『基鏈接（環境域名）』，forceRefresh：true  ／是否強制刷新整個頁面｝）

                axios.defaults.withCredentials = true;  //設置cross跨域並設置訪問許可權允許跨域攜帶cookie信息

                攔截設置：

  axios.interceptors.request.use(function (config) { return config;（請求參數攔截處理，如：請求頭添加token或者其他（config.[『headers』].token=……））}, function (error) { return Promise.reject(error);});

                   axios.interceptors.response.use(function (response) { return response;(請求成功返回參數錯誤處理，如：返回不同狀態碼跳轉不同頁面，token失效重登錄……)}, function (error) { return Promise.reject(error);（請求失敗錯誤處理，如：登錄失效，跳轉重新登錄）});

          history.js（路由環境配置）

             配置原理（根據package.json文件裡面配置的NODE_ENV==『production』或者』development』加上webpack.config.js裡面的Deserver.proxy設置的代理key來配置開發或者正式環境的url前綴，配合createBrowserHistory.basename設置）

          until.js    （公用方法文件）

        index.js（全局引入，如：utils.request、@babel/polyfill、assets/.peg、路由前綴在路由上全局配置）

        routers.js  （路由文件）

        app.js（正經的組建文件，設置頁面大致框架和路由跳轉設置，也能做一些全局設置）

        index.html（可以做全局引入三方資源）

————————————————————————————————————————

這裡的webpack配置是根據webpack4.30版本配置，算不上目前最新版本，配置也比較繁瑣，裡面用了happypack快速啟動快速打包的多線程插件可能會跟你項目的一些配置方式出現衝突。

webpack配置

一個打包工具

npm install –save-dev webpack : 安裝Webpack

npm install webpack webpack-cli –save-dev :此工具用於在命令行中運行 webpack

webpack 開箱即用，可以無需使用任何配置文件。webpack 會假定項目的入口起點為 src/index.js ，然後會在 dist/main.js 輸出結果，並且在生產環境開啟壓縮和優化。

在package.json文件中添加命令，然後通過npm run build即可運行打包

但是通常項目還需要繼續擴展此能力，為此可以在項目根目錄下創建一個 webpack.config.js 文件，然後 webpack 會自動使用它。

也可以根據特定情況使用不同的配置文件，則可以通過在命令行中使用 –config flag 修改此配置文件名稱。

每個html頁面都有一個入口點，單頁面應用：一個入口起點；多頁面應用：多個入口起點

mode?: “development” | “production” | “none”;

。。。。。

（webpack 提供合理的默認值，但是還是可能會修改一些解析的細節）

條件的輸入值由兩種，

在條件中，對 resource 進行匹配的屬性有 test / include / exclude / resource

在條件中，對 issuer 進行匹配的屬性有 issuer

註：當使用多個條件屬性時，需要同時滿足，當屬性條件為數組時，滿足數據中的一個即可

可以對匹配規則的模塊進行 應用loader 或者 解析選項對象

oneOf?: RuleSetRule[];

rules?: RuleSetRule[];

webpack配置示例：

使用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組件的頁面就完成了。

。