Webpack 入門教程

Webpack 是一個前端資源加載/打包工具。它將根據模塊的依賴關係進行靜態分析，而後將這些模塊按照指定的規則生成對應的靜態資源。

一、安裝node.js

 根據網上教程安裝便可

二、安裝webpack

npm install webpack --save-dev

三、建立項目文件目錄

 建立文件夾test目錄，建立js目錄與文件main.js,

四、npm初始化

在項目文件夾中實例化npm。運行命令：

npm init

會生成文件夾 node_modules 與文件：package.json  、 package-lock.json

五、建立webpak配置文件

建立目錄：dist ，打包後的js文件會生成到該目錄

新建配置文件：webpack.config.js，打包時會自動識別配置文件，輸入代碼：

var path=require('path');
 
module.exports = {
　　entry: './js/main.js',
　　output: {
　　　　path: path.join(__dirname,'dist/js'),
　　　　filename: 'bundle.js'
　　},
 
};

 

六、運行打包命令

 在項目文件夾下執行命令：

webpack

會看到 dist 文件夾下生成 js 目錄，和 bundle.js 文件

 

至此打包成功，新建 index.html 後，引入 js/bundle.js 能夠看到代碼執行成功。