今天上午看到一篇非常棒的webpack入門教程,原文鏈接:
https://segmentfault.com/a/1190000006178770#articleHeader4港谊。
- 使用
npm init
命令創(chuàng)建package.json文件 - 安裝webpack:
npm install --save-dev webpack
- 創(chuàng)建兩個(gè)js文件:
main.js Greeter.js
其中main.js 依賴Greeter.js盆色。
我們的目的就是把這兩個(gè)js文件用webpack打包成一個(gè)js文件朴下。 - 使用命令
webpack main.js bundle.js
,其中main.js是入口文件忘嫉,bundle.js是打包后的文件。
上面的命令稍微有點(diǎn)‘復(fù)雜’,但是我們可以通過配置文件來打包妆艘。
- 首先創(chuàng)建一個(gè)webpack.config.js文件,文件內(nèi)容如下:
module.exports = {
entry: __dirname + "/app/main.js",//已多次提及的唯一入口文件
output: {
path: __dirname + "/public",//打包后的文件存放的地方
filename: "bundle.js"http://打包后輸出文件的文件名
}
}
其中的entry就是我們上面步驟4的main.js(也就是入口文件)看幼,output用于指定打包后的那個(gè)js文件的路徑和名字批旺。
- 使用命令
webpack
就能生成bundle.js了。
另外诵姜,還可以修改node的配置文件來執(zhí)行打包:
//package.json
"scripts": {
"start":"webpack"
},
OK,現(xiàn)在使用命令npm start
就能成功打包js文件了汽煮。