Webpack安裝與使用

2021-08-18 01:46:04 字數 1716 閱讀 1841

2023年4月2號

最近做專案要用到webpack，也學點東西，之前電腦裡裝了npm。

//安裝到你的專案目錄


npm install -d webpack@3
注意：開始是預設安裝，結果安裝了4版本，沒有玩起來，然後，解除安裝重新安裝的：

npm uninstall webpack -g


npm install webpack@3 -g    // g代表全域性安裝，我覺得沒有必要
npm init

npm init
index.html檔案）。接下來我們再建立三個檔案:
greeter.jshtml

// greeter.js


module.exports = function() ;
main.jsgreeter模組

const greeter = require('./greeter.js');



# 出填寫入口檔案的路徑，本文中就是上述main.js的路徑，


# 處填寫打包檔案的存放路徑


# 填寫路徑的時候不用新增{}


webpack
非全域性安裝的情況:

# webpack非全域性安裝的情況
報錯（4版本時候的保錯）：

node_modules/.bin/webpack 執行不了

參考：package.json裡面配置start

"scripts": ,
執行命名：

還是報錯，分析也許我的是windows系統，檔案路徑可能要寫反斜槓

結果如下：

通過配置來使用webpack

webpack.config.js

module.exports = 


}
注：「__dirname」是node.js中的乙個全域性變數，它指向當前執行指令碼所在的目錄。
webpack(非全域性安裝需使用node_modules/.bin/webpack)webpack.config.js上面配置了start，然後就可以直接執行 npm start 就可以了，如下圖：

webpack 安裝與使用教程

最穩定版本webpack 3.11.0 1.手動或通過npm 新建如下的目錄 2.給 index.html,index.css,common.css 新增樣式 3.在webpack test檔案下 使用bash 執行 npm init y y 表示全都yes 4.bash執行 npm install...

開坑webpack（一） 安裝與簡單使用

在專案根目錄下分別建立三個檔案 index.js index.js 入口檔案。指定入口檔案後，webpack將自動識別專案所依賴的其它檔案 require style.css es5 document.write hello world style.css style.css bodyindex.h...

webpack 2 安裝和使用

webpack cli 讓我們能在命令列中直接執行webpack或者使用 npm scripts 執行webpack命令 1.webpack 配置 在命令列中執行，配置項加在後面 webpack src js index.js o dist js build.js mode development2...