1、初始化一個項目，以此使用以下幾個命令
mkdir muke-Webpack&&cd muke-Webpack \\創建目錄并進入目錄
npm init -y \\初始化 默認Y
npm install --save-dev webpack \\安裝webpack
2、該目錄下順便建立幾個文件夾
mkdir src \\存放代碼文件
mkdir dist \\存放打包后的文件
atom ./ \\ 進入Atom 編輯器
3、項目的根目錄下新建webpack.config.js 內容如下：
const path = require('path');
module.exports = {
entry:{
main:'./src/script/main.js',
a:'./src/script/a.js'
}, \\ 或者 entry: './src/script/main.js'
output:{
path:path.resolve(__dirname,'dist','js'), （1）
filename:'[name].js'//多文件下需要這么寫 （2）
// filename:'bundle.js' //單文件下這么寫
}
}
備注 （1） Node.j中path模塊對路徑的操作
（2）參考官方文檔 或者這個文章 webpack入門筆記（一）——漫漫踩坑路
4、最后打包出來的js文件bundle.js 可以這樣引用到HTML中
<html>
<head>
<meta charset="utf-8">
<title>webpack </title>
</head>
<body>
<script type="text/javascript" src="bundle.js">
</script>
</body>
</html>
5、一般打包的命令是 $ webpack
還可以可以通過在package.json中加入參數，如下。加號后就可以執行命令 npm run webpack
{
"name": "muke-Webpack",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"webpack":"webpack --config webpack.config.js --progress --display-modules --colors" //加入的參數
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^3.10.0"
}
}
