webpack--簡單入門(1)
阿新 • • 發佈：2019-01-02
1.介紹
Webpack 是當下最熱門的前端資源模組化管理和打包工具。它可以將許多鬆散的模組按照依賴和規則打包成符合生產環境部署的前端資源。還可以將按需載入的模組進行程式碼分隔，等到實際需要的時候再非同步載入。通過 loader 的轉換，任何形式的資源都可以視作模組，比如 CommonJs 模組、 AMD 模組、 ES6 模組、CSS、圖片、 JSON、Coffeescript、 LESS 等。
2.安裝
我們需要安裝一個node.js ， Node.js 自帶了軟體包管理器 npm，建議使用最新版node.js. 通過npm安裝webpack:安裝成功後通過 webpack -h 檢視幫助$ npm install webpack -g
3.使用
我們建立一個專案來使用一下webpack吧！
新建一個demo1資料夾，
通過npm init 建立一個package.json檔案：（看不懂的可以一直回車，沒什麼關係）
我們把webpack安裝到當前的專案依賴中：
npm install webpack --save-dev
//縮寫：
npm i webpack -D
// –save：模組名將被新增到dependencies，可以簡化為引數-S。
// –save-dev: 模組名將被新增到devDependencies，可以簡化為引數-D。
新建一個index.html：{ "name": "demo1", "version": "1.0.0", "description": "", "main": "index.js", "scripts": { "test": "echo \"Error: no test specified\" && exit 1" }, "author": "mnixu", "license": "ISC", "devDependencies": { "webpack": "^1.13.1" } }
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="bundle.js"></script>
</body>
</html>新建一個webpack.config.js：document.write('<h1>Hello World</h1>');
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};$ webpack
開啟index.html就能看到 hello world 了.
webpack也可以將依賴模組打包到一個檔案：
新建一個main1檔案
// main1.js
document.write('<h1>Hello World</h1>');//main.js
document.write('<h1>Hello World</h1>');
require("./main1.js")
Webpack 會分析入口檔案，解析包含依賴關係的各個檔案。這些檔案（模組）都打包到 bundle.js 。Webpack 會給每個模組分配一個唯一的 id 並通過這個 id 索引和訪問模組。在頁面啟動時，會先執行 入口檔案 中的程式碼，其它模組會在執行 require 的時候再執行。webpack還可以打包多個入口檔案： 在原來專案下新建資料夾，進入資料夾： 新建main1.js main2.js檔案：
// main1.js
document.write('<h1>Hello World</h1>');
// main2.js
document.write('<h2>Hello Webpack</h2>');//webpack.config.js
module.exports = {
entry: {
bundle1: './main1.js',
bundle2: './main2.js'
},
output: {
filename: '[name].js'
}
}
<html>
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<script type="text/javascript" src="bundle1.js"></script>
<script type="text/javascript" src="bundle2.js"></script>
</body>
</html>