webpack的安裝和使用

安裝以及檢測

1、安裝webpack：為了避免通過npm安裝出錯，建議通過cnpm安裝,我這里安裝的是webpack 3的版本

全局安裝：cnpm install -g webpack@3.12.0 

局部安裝 : cnpm install webpack@3.12.0 --save-dev

2、檢測webpack 是否安裝成功，如下表示安裝成功

webpack的使用，如下所示，使用了webpack后的項目

項目中webpack使用的步驟：

①：創建下面這樣的一個項目

 

②、通過執行：npm init ，生成package.json文件，如下圖。

 

 ③、通過webpack局部安裝一下，頂部的局部安裝方法，並創建webpack.config.js文件，該文件的基本代碼如下：

module.exports = {
 entry:"./src/js/index.js",
 output:{
 path:__dirname+"/build/js",
 filename:"index.bundle.js"
 }
};
④、要想通過：npm run webpack，對項目進行打包，需要對生成的package.json，添加webpack

 

 對package.json進行上圖操作。

再執行：npm run webpack

生成了index.bundle.js文件，這時就可以在index.html中引入該文件了。