一、webpack實現對css檔案的打包
注意：webpack 只能打包處理 js 型別的檔案，無法處理其他非 js 型別的檔案。
解決方法：我們需要手動安裝一些合適的第三方 loader 載入器。
打包 css 檔案，需要安裝：cnpm i style-loader css-loader -d
在 webpack.config.js 配置檔案中，新增乙個配置節點，叫 module ，是乙個物件，在module 物件身上有乙個rules屬性
是乙個陣列，存放了所有第三方檔案的匹配和處理規則。
//這是乙個配置檔案，本質是乙個js檔案，通過node中的模組操作，向外暴露乙個配置物件
module.exports = ,
plugins:[ //配置外掛程式的節點
new htmlwebpackplugin()
],module:, //處理 .css 的檔案第三方 loader 規則]}
}
實現less檔案打包所依賴的包有：①css-loader ②style-loader ③less-loader ④less（less-loader的依賴包）
警告提示我們去安裝 less 依賴包
注意：也可以去直接將依賴包全部安裝：cnpm install less less-loader style-loader css-loader -d
同理，需要在webpack.config.js中去配置
module:, //處理 .css 的檔案第三方 loader 規則
, //注意先後順序]}
打包scss檔案需要依賴①css-loader ②style-loader ③sass-loader ④node-sass（這個包為sass-loader所依賴的）
注意：一般情況下使用 npm 裝 node-sass 是裝不下去的,所以我們使用 cnpm 來裝。
module:, //處理 .css 的檔案第三方 loader 規則
, //處理 .less 檔案
, //處理 .scss 檔案]}
四、webpack實現url請求資源的打包
打包url()請求的資源需要安裝的node包有：①url-loader ②file-loader（url-loader依賴的loader） 命令： cnpm i url-loader file-loader -d
舉例：在檔案中設定 css 背景圖 background-images: url(…/images/zlq.jpg);
在 index.css 中設定了背景圖
在 mian.js 中引入檔案， import 『./css/index.css』;
接下來需要在 webpack.config.js 中進行配置
module:, //處理 .css 的檔案第三方 loader 規則
, //處理 .less 檔案
, //處理 .scss 檔案
/**/
, , //處理字型檔案的loader]}
注意：webpack只能處理部分 es6 的新語法，因此需要匯入第三方 loader 來幫助 webpack 來處理。
module:, //處理 .css 的檔案第三方 loader 規則
, //處理 .less 檔案
, //處理 .scss 檔案
, // 配置 babel 來轉換高階的es語法]}
vue專案中的每個頁面都是乙個.vue檔案，這種檔案，vue稱之為元件頁面。必須借助於webpack的vue-loader才能夠解析。
所依賴的包：cnpm i vue-loader vue-template-compiler -d
在配置檔案中，新增loader配置項
module:, //處理 .css 的檔案第三方 loader 規則
, //處理 .less 檔案
, //處理 .scss 檔案
// , // 配置 babel 來轉換高階的es語法
//配置 .vue 檔案]},
注意： 在 webpack 中， 使用 import vue from 『vue』 匯入的 vue 建構函式，功能不完整，只提供了 runtime-only 的方式，並沒有提供像網頁中那樣的使用方式
當我們匯入 vue 包之後，就可以去例項化乙個 vm。
/*
回顧 包的查詢規則：
找專案根目錄中有沒有 node_modules 的資料夾
在 node_modules 中 根據包名，找對應的 vue 資料夾
在 vue 資料夾中，找 乙個叫做 package.json 的包配置檔案
在 package.json 檔案中，查詢 乙個 main 屬性【main屬性指定了這個包在被載入時候，的入口檔案】
通過在找到的檔案中可以看到 mian 屬性的值引入的是乙個不完整的 .js 檔案，因此我們需要重新修改main屬性值
修改方法：
1.可以直接修改 main 屬性為 "main": "dist/vue.js",
2.可以重新在 main.js 檔案中重新引入 import vue from '../node_modules/vue/dist/vue.js';
*/var vm = new vue(,
});
這是登入元件，使用 .vue 檔案定義出來的 --- }
import login from "./login.vue";var vm = new vue(,
render: function (createelements)
});
解決方法：需要在配置檔案中進行如下配置即可：
// webpack.config.js
const vueloaderplugin = require('vue-loader/lib/plugin')
module.exports =
webpack打包工具
終端執行 yarn webpack或者 在package.json中加入 scripts 開發模式 yarn webpack mode development原始模式 yarn webpack mode none在webpack.config.js中增加mode的模式 mode developmen...
webpack打包工具
目的 平時小專案中例如一些 需要進行打包壓縮，用這個工具可以進行打包壓縮，就可以上傳到伺服器。使用方法 1，引進需要打包的專案，把入口html替換掉專案中的index.html，把引進的js，css都放在src裡面對應的資料夾裡面 2，npm install 3，進行webpack.config.j...
Webpack打包工具詳解
webpack是一種前端資源構建工具 乙個靜態模組打包器 在webpack看來 前端所有資源檔案都會作為模組處理 他將根據模組的依賴關係進行靜態分析 打包生成對應的靜態資源 webpack 可以做到按需載入。像 grunt gulp 這類構建工具，打包的思路是 遍歷原始檔 匹配規則 打包，這個過程中...