webpack介紹
Webpack 是當(dāng)下最熱門的前端資源模塊化管理和打包工具。它可以將許多松散的模塊按照依賴和規(guī)則打包成符合生產(chǎn)環(huán)境部署的前端資源。還可以將按需加載的模塊進行代碼分隔，等到實際需要的時候再異步加載。通過 loader 的轉(zhuǎn)換，任何形式的資源都可以視作模塊，比如 CommonJs 模塊、 AMD 模塊、 ES6 模塊、CSS、圖片、 JSON、Coffeescript、 LESS 等。
安裝
本地安裝
npm install webpack --save-dev
npm install webpack@<version> --save-dev //安裝指定版本的webpack
全局安裝
npm install webpack -g
小試牛刀
webpack打包javascript模塊
1.新建一個文件夾，進入文件夾右鍵打開git bush
npm init -y // npm初始化文件會自動建一個 package.json文件
npm install --save-dev webpack //本地安裝webpack
./node_modules/.bin/webpack --help // windows下這個查看有沒有安裝好webpack，中文文檔這里錯了
2.在文件夾中新建一個app文件夾，并新建一個index.js
function component () {
var element = document.createElement('div');
/* 需要引入 lodash，下一行才能正常工作 */
element.innerHTML = _.join(['Hello','webpack'], ' ');
return element;
}
document.body.appendChild(component());
3.在根目錄下建一個index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack2</title>
</head>
<body>
<--!這里引用的webpack打包以后的js文件-->
<script src="dist/bundle.js"></script>
</body>
</html>
4.由于index.js里面引用了lodash.js所以本地必須安裝lodash.js
npm install -save lodash
5.關(guān)鍵的一部，開始主角上場了
./node_modules/.bin/webpack app/index.js dist/bundle.js
webpack路徑 要打包的文件 打包以后的路勁
U`$PNW_R2KUC3`53_(XUS~8.png
這樣就打包成功了，我們會發(fā)現(xiàn)項目根目錄下多了一個
dist文件夾，里面有個bundle.js文件，這個就是我們打包后的文件webpack除了會修改
import/export以外不會修改你的代碼，如果想使用es6語法需要使用Babel來編譯
6.除了命令行的方式來完成打包，我們還可以通過配置文件的方式來實現(xiàn)，現(xiàn)在項目根目錄新建一個webpack.config.js文件
var path = require('path');
module.exports = {
entry: './app/index.js', //入口文件
output: {
filename: 'bundle.js', //完成打包以后的文件名稱
path: path.resolve(__dirname, 'dist') // 打包文件的目錄位置
}
};
這時候執(zhí)行webpack命令
webpack --config webpack.config.js
380)_C9K2$Z6BIMMI~MHX}I.png
配置文件可以是我們靈活的是用webpack。使用配置文件，我們可以對bundle添加加載器規(guī)則、插件、解析 選項，以及許多增強功能。
7.這種方式還是不是很方便，我們可以設(shè)置還可以在設(shè)置快捷方式，可以再package.json里面配置
{
"name": "webpack-demo",
"version": "1.0.0",
"description": "",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"build": "webpack" //配置在這里
},
"keywords": [],
"author": "",
"license": "ISC",
"devDependencies": {
"webpack": "^2.2.1"
},
"dependencies": {
"lodash": "^4.17.4"
}
}
設(shè)置好了之后，通過npm run build 就可以啟動了
8.文件目錄如下
}NQ31WDS$Y_W}{7@7L4JD3H.png
9.這就是webpack最基本的用法
