1.安裝完webpack后，新建一個(gè)目錄各拷，目錄中放入項(xiàng)目文件（只有一個(gè)js文件的情況下）
在命令行（cmd）中進(jìn)入項(xiàng)目目錄下（wpk-test）杭棵，執(zhí)行命令：
$ webpack show.js bundle.js
以上命令是將show.js打包成bundle.js粘驰，在index.html中引入bundle.js即可。
但以上舉例并沒有將webpack的打包功能體現(xiàn)出來皮仁，這與直接引入show.js幾乎沒有區(qū)別籍琳，那么在多個(gè)js中間有牽連依賴的情況下，我們該怎么使用webpack呢贷祈？
2.安裝完webpack后趋急，新建一個(gè)目錄，目錄中放入項(xiàng)目文件（多個(gè)js文件且它們之間相依賴的情況下）
image.png
其中势誊，str.js中有一個(gè)函數(shù)呜达，通過
module.exports=outstr;
來暴露出來以供別的js文件使用，str.js通過
var fn=require("./str.js");
console.log( fn("打印文字"））粟耻；
來使用str.js中的文字
最后再通過在命令行（cmd）中進(jìn)入項(xiàng)目目錄下（wpk-test）查近，執(zhí)行命令：
$ webpack show.js bundle.js
生成打包好的js文件引入html文件中即可。
3.打包樣式文件
image.png
第一步挤忙，cmd進(jìn)入項(xiàng)目目錄執(zhí)行
$ webpack init
一路回車下去即可（也可以自定義）霜威，項(xiàng)目目錄下會(huì)出現(xiàn)一個(gè)json文件
接下來安裝loader加載器
npm install css-loader style-loader
安裝完成后，json文件變成了
image.png
此時(shí)册烈，項(xiàng)目目錄下新建style.css
image.png
此時(shí)戈泼，新建一個(gè)配置文件webpack.config.js，
module.exports = {
entry: './src/js/show.js',
output: {
path:__dirname, 'dist', //輸出目錄的配置，模板大猛、樣式扭倾、腳本、圖片等資源的路徑配置都相對于它
filename: "bundle.js"
},
module: {
loaders: [
{
test:/\.css$/
loader:'style-loader!css-loader'
}
]
}
};
此時(shí)項(xiàng)目目錄（此時(shí)將目錄進(jìn)行了略微整理）
image.png
最后挽绩，在命令行執(zhí)行
webpack即可吆录，倘若后面樣式文件或js有修改，也執(zhí)行webpack即可自動(dòng)打包琼牧。
