一、先寫一個簡單demo1
1-1安裝好webpack后創建這樣一個目錄：
1-2:向src各文件和dist/index.html文件寫入內容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </head> <body> <div>測試webpack</div> </body> </html> <script src="bundle.js"></script>
document.write('我是a.js文件'+'</br>');
document.write('我是b.js文件'+'</br>');
require('./a');
require('./b');
document.write('我是main.js,我require了a.js文件和b.js文件');
1-3向webpack.config.js中寫入內容：
module.exports = { entry: "./src/js/main.js", //模塊的入口文件 output: { filename: "bundle.js", //打包后輸出文件的文件名 path: __dirname + '/dist' //打包后的文件存放的地方;注："__dirname"是node.js中的一個全局變量，它指向當前執行腳本所在的目錄。 } };
1- 4 接下來，在終端進入目錄，寫入webpack回車
js下的三個文件都被打包好了，再回來看看我們的目錄,多了一個dist/bundle.js的文件！
運行結果：
一張圖解：
二、寫一個多入口文件demo2
2-1安裝好webpack后創建這樣一個目錄：
2-2:向src各文件和dist/index.html文件寫入內容：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
</head>
<body>
<div>測試webpack</div>
</body>
</html>
<script src="main.js"></script>
<script src="main1.js"></script>
2-3向webpack.config.js中寫入內容：
module.exports = {
entry: {
main : './src/js/main.js',
main1 : './src/js/main1.js'
},
output: {
filename: "[name].js", //這里的name是占位符[name]分別對應entry中寫入的[main]和[main1],這表示，在dist下生成的是main.js和main1.js兩個JS文件
path: __dirname + '/dist'
}
};
2- 4 接下來，在終端進入目錄，寫入webpack回車
js下的三個文件都被打包好了，再回來看看我們的目錄,多了兩個dist/main.js、dist/main1.js的文件！
運行結果：
一張圖解：
三、寫一個引入css的demo3
3-1安裝好webpack后創建這樣一個目錄：
3-2:向src各文件和dist/index.html文件寫入內容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </head> <body> <div class="test">測試webpack</div> </body> </html> <script src="bundle.js"></script>
main.css
.test{ color: red; }
main.js
require('./a'); require('./b'); require('../css/main.css'); document.write('我是main.js,我require了a.js文件和b.js文件'+'</br>');
3-3向webpack.config.js中寫入內容：
module.exports = { entry: './src/js/main.js', output: { filename: "bundle.js", path: __dirname + '/dist' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' } //.css 文件使用 style-loader 和 css-loader 來處理. ] } };
3- 4 接下來，在終端進入目錄，先執行npm install style-loader --save-dev 和 npm install css-loader --save-dev 安裝，然后寫入webpack回車
js下的三個文件都被打包好了，再回來看看我們的目錄,只多了一個dist/bundle.js的文件。但是css這時候是生效了的。
運行結果：
四、寫一個打包圖片的demo4
打包圖片有三種，html中的圖片，css中的圖片，js中的圖片，這里只簡寫一個css中的圖片。
4-1安裝好webpack后創建這樣一個目錄：
4-2:向src各文件和dist/index.html文件寫入內容：
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>webpack</title> </head> <body> <div class="test">測試webpack</div> </body> </html> <script src="bundle.js"></script>
main.css
.test{ color: red; width: 150px; height: 100px; background: url("../image/1.jpg"); }
js文件和上面一樣，就不贅述了。
4-3向webpack.config.js中寫入內容：
module.exports = { entry: './src/js/main.js', output: { filename: "bundle.js", path: __dirname + '/dist' }, module: { loaders: [ { test: /\.css$/, loader: 'style-loader!css-loader' }, //.css 文件使用 style-loader 和 css-loader 來處理. { test: /\.(png|jpg|jpeg|gif)$/, loader: 'url-loader?limit=8192'} //圖片文件使用 url-loader 來處理，小於8kb的直接轉為base64 ] } };
4- 4 接下來，在終端進入目錄，先執行npm install url-loader --save-dev 和 npm install file-loader --save-dev 安裝，然后寫入webpack回車
js下的三個文件都被打包好了，再回來看看我們的目錄,多了一個dist/bundle.js的文件和一個被打包好的圖片文件。
運行結果：
