webpack的使用（三）

由於一些原因，我解除安裝了之前安裝的webpack3.6.1，重新安裝了webpack4.41.6的版本

注意：npm install webpack -g 之後，還要安裝 npm install webpack-cli -g

在本地專案亦是如此。

在網上看到：

webpack4 預設不需要再建立webpack.config.js來配置打包的入口和出口；

預設情況下，

入口為./src/index.js檔案

出口為./dist/main.js檔案

這一點我自己還暫未去試。

接下來進入這次記錄的正題：

cnpm i url-loader file-loader -d

module:,//配置處理.css檔案的第三方loader規則,,

//處理路徑的loader
//limit 給定的值，是的大小，單位是byte，如果我們引用的，大於或者等於給定的limit值，則不會被轉為base64格式的字串，
// 如果，小於給定的limit值，則會被轉為base64的字串
]}

（1）首先安裝bootstrap：

cnpm i bootstrap -s

（2）現在boostrap的css裡刪除了圖示，分開了

npm i  -d

import 'bootstrap/dist/css/bootstrap.css'

import 'open-iconic/font/css/open-iconic-bootstrap.css'

// 處理 字型檔案的 loader

（1）在 webpack 中，執行如下兩套命令，安裝 babel 相關的loader 功能。

cnpm i babel-core babel-loader babel-plugin-transform-runtime -d

cnpm i babel-preset-env babel-preset-stage-0 -d

（2）開啟webpack.config.js檔案，在module節點下的rules陣列中，新增乙個新的配置規則：

（3）在專案根目錄中，新建乙個 .babelrc 的配置檔案，寫如下配置：

（注意：這個配置檔案屬於 json 格式，所以在寫配置的時候，必須符合json語法規範，不能寫注釋，字串必須用雙引號。）

注意：    在配置 babel 的 loader規則的時候，必須 把 node_modules 目錄，通過 exclude 選項排除掉：原因有倆：
1.如果 不排除 node_modules， 則babel 會把 node_modules 中所有的 第三方 js 檔案，都打包編譯，這樣，會非常消耗cpu，同時，打包速度非常慢；
2.哪怕，最終，babel 把 所有 node_modules 中的js轉換完畢了，但是，專案也無法正常執行！

module: , // 處理 css 檔案的 loader

, // 處理 less 檔案的 loader
, // 處理 scss 檔案的 loader
, // 處理 路徑的 loader
// limit 給定的值，是的大小，單位是 byte， 如果我們引用的 ，大於或等於給定的 limit值，則不會被轉為base64格式的字串， 如果 小於給定的 limit 值，則會被轉為 base64的字串
, // 處理 字型檔案的 loader 
, // 配置 babel 來轉換高階的es語法
]}

webpack的基本使用

webpack最基本的使用 1.webpack可以處理js檔案的相互依賴關係 2.webpack可以處理js的相容問題，把高階的 瀏覽器無法解析的語法轉為 低階的 瀏覽器能夠解析的語法 命令格式 webpack 要打包檔案路徑 o 輸出的檔案路徑 配置webpack.config.js來簡化打包流程...

webpack的簡單使用

webpack 是乙個前端資源載入 打包工具。它將根據模組的依賴關係進行靜態分析，然後將這些模組按照指定的規則生成對應的靜態資源。從圖中我們可以看出，webpack 可以將多種靜態資源 js css less 轉換成乙個靜態檔案，減少了頁面的請求。npm install g webpack webp...

webpack的簡單使用

1全域性安裝webpack npm install webpack g 2專案內安裝webpack包 npm install webpack s e dev 3新增乙個package.json npm init yes 4新增乙個配置檔案webpack.config.js具體配置資訊 中文文件，官網...