如果你是新手，已經了解什么是CommonJS/AMD以及gulp等，請參照過程，一步一步來，請盡量使用復制粘貼來處理文件內容（因為代碼比較簡單，理解就好，減少不必要的抄寫同時也能避免一些低級錯誤），以理解學會使用為主。
學習過程僅供參考。入門學習，建議有基礎的就不必看了。
對webpack的理解，官網有圖描述，這里就不抄了。https://webpack.github.io/
使用gitbash進行操作。（Windows系統）
以實現一個 webpack 的 Hello World為例，滿足以下功能：
- CSS 用 Less 或 SCSS 實現
- 圖片使用 Webpack 引入、壓縮
- JS 使用 ES Modules 語法，然后用 Babel 轉為 ES 5
- 所有代碼都要最小化（壓縮）
- 要有緩存控制（GitHub 自帶功能）也就是說文件名應該是 bundle-xxxxxxxxxxx.js*
一.安裝webpack
a.當前目錄安裝
注意：要在當前目錄安裝首先要保證目錄下有``package.json``文件，如果當前目錄文件為空，請執行npm init。
安裝webpack
$ npm install --save-dev webpack //本地安裝webpack
安裝結束之后，執行
$ ./node_modules/.bin/webpack --help
可執行未報錯，則說明安裝成功。
b. 全局安裝webpack
$ npm install -g webpack //全局安裝webpack
安裝結束之后，執行
$ webpack --help
，可執行未報錯，則說明安裝成功。
最后執行git init命令，初始化git倉庫。新建.gitignore文件，并且在里面加上一行 node_modules，然后再把已有文件，git add ，git commit。
二.webpack怎么用？（如何學習？copy--run--modify）
webpack是一個模塊打包器。
關于模塊，webpack支持CommonJS/AMD這兩種大家比較熟悉的模塊加載方式。ES Modules加載模塊方式webpack也支持。
（1）. copy--官網示例https://webpack.js.org/guides/getting-started/
跟著示例，創建目錄文件
$ touch index.html
$ mkdir src
$ touch src/index.js
$ vi index.html //copy--官網index.html文件內容
$ vi src/index.js //copy--官網index.js文件內容
然后根據指引創建bundle.js
$ mkdir dist
$ mv index.html dist
$ npm install --save lodash //安裝一個操作數組的庫，以便index.js使用這個庫
安裝lodash之后，便可以在index.js中直接使用import的方式來引用lodash庫。
參考官網內容copy。
index.html也需要修改
然后運行本地webpack
$ ./node_modules/.bin/webpack src/index.js dist/bundle.js
查看bundle.js是否創建成功
$ ll dist
index.html bundle.js //創建成功
（2）.run--瀏覽器中打開index.html，查看是否報錯。
$ open dist/index.html
如若需要將本目錄初始化為git倉庫，建議執行git init，創建.gitignore文件，并且在里面加上一行 node_modules，以防止你把這個目錄上傳到 GitHub 上。
插播：可修改package.json文件
打包時，執行命令npm run build既可。
到了這里，示例過程其實很簡單，就是webpack把lodash的js模塊打包，不用放在html中去單獨引入模塊了。
（3）.modify--安裝jQuery，使用jQuery寫index.js并且實現打包
接下來就是modify（修改），安裝jQuery，在index.js 中引入，并使用jQuery的語法寫index.js中的語句。
$ npm i -S jquery
然后改寫src/index.js。
import _ from 'lodash';
import $ from 'jquery';
function component() {
var $div = $('<div/>')
// Lodash, currently included via a script, is required for this line to work
$div.html(_.join(['Hello', 'webpack'], ' '));
return $div;
}
$(document.body).append(component());
然后打包，查看頁面是否報錯。
$ npm run build
$ open dist/index.html
插播 ：如何引用本地js文件?
首先創建一個js文件，操作如下：
$ touch src/amyli.js
$ vi src/amyli.js //文件內容copy下面提供的代碼
amyli.js
let name = 'amyli';
let age = '18';
let gender = 'female';
function sayHi() {
console.log('Hi,I am ${name}')
}
export {
name,
age,
gender,
sayHi
} //輸出對象
與此同時，index.js中的引入方式：
import _ from 'lodash';
import $ from 'jquery';
import * as AmyLi from './AmyLi.js';
AmyLi.sayHi();
function component() {
var $div = $('<div/>')
// Lodash, currently included via a script, is required for this line to work
$div.html(_.join(['Hello', 'webpack'], ' '));
return $div;
}
$(document.body).append(component());
$ npm run build
至此，大家通過上面的示例操作，對webpack的一個基本的打包過程，應該就有所了解了。簡而言之，三步走：
- 本地安裝模塊，
- 引入模塊到
index.js或者main.js， -
webpack打包到目標發布文件。
同理可猜測，css/less/sass/圖片等引入過程與之基本相似。
由于項目中每次進行打包的均是項目的相關文件，單個文件的操作就比較反人類了。那么接下來就化繁為簡的去了解webpack配置。
三.著名的webpack配置
官方示例：
操作如下：
$ touch webpack.config.js
$ vi webpack.config.js //粘貼官網示例文件內容
$ ./node_modules/.bin/webpack --config webpack.config.js //打包時執行配置文件設置
當前的配置文件內容比較容易看懂，主要是對輸入輸出進行相關配置，可逐句讀過并理解。
package.json文件中稍作修改
"build": "webpack"
執行打包命令
npm run build
看了這么久，接下來，終于要開始使用webpack實現去本文開頭提到的5個功能了。不要心急，有了上面做基礎，你會發現下面就很容易了。
示例中，在index.js中引入js類的模塊時，webpack通過webpack.config.js知道如何處理js，編譯之后打包成一個瀏覽器支持的js文件。
而其他類型的文件，幾乎都有加載器可以使用，我們可根據需要安裝加載器，然后進行配置，來告訴webpack如何進行打包。
1.css打包
具體操作如下：
$ touch index.css
$ vi index.css
index.css
body{
background: #ddd;
color: red;
display: flex;
}
index.js
import _ from 'lodash';
import $ from 'jquery';
import './index.css'
function component() {
var $div = $('<div/>')
// Lodash, currently included via a script, is required for this line to work
$div.html(_.join(['Hello', 'webpack'], ' '));
return $div;
}
$(document.body).append(component());
webpack.config.js
var path = require('path');
module.exports = {
// 入口 main.js
entry: './src/index.js',
//輸出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [
{
test: /\.css$/,
loader:'style-loader!css-loader!autoprefixer-loader' //3個loader
}
]
}
};
//前兩個loader是告訴webpack如何打包css，具體效果打開index.html查看css，最后一個loader，給相關css屬性加前綴，還可以設置兼容版本等。
然后執行
$ npm run build
結果報錯，提示安裝loader。
按照提示，配置參數，安裝loader
$ npm i -D style-loader
$ npm i -D css-loader
$ npm i -D autoprefixer-loader
再次執行
$ npm run build
打包未報錯，打開index.html，查看css樣式是否成功引入。
一般執行下來順利，css便能成功打包在瀏覽器可執行。
2.圖片打包壓縮
將xxx.png文件放入src文件夾中。
打開編輯index.js
import _ from 'lodash';
import $ from 'jquery';
import './index.css'
//import png from './1.jpg'
var img1 = document.createElement("img");
img1.src = require("./1.jpg"); //img1.src = png;
document.body.appendChild(img1);
function component() {
var $div = $('<div/>')
// Lodash, currently included via a script, is required for this line to work
$div.html(_.join(['Hello', 'webpack'], ' '));
return $div;
}
$(document.body).append(component());
webpack.config.js
var path = require('path');
module.exports = {
// 入口 main.js
entry: './src/index.js',
//輸出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [
{
test: /\.css$/,
loader:'style-loader!css-loader!autoprefixer-loader'
},
{
test: /\.(png|jpg)$/,
//loader: 'url-loader?limit=8192'
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader?bypassOnDebug&optimizationLevel=7&interlaced=false'
]
}
]
}
};
//這里處理圖片的loader給配置了圖片壓縮功能的loader
安裝配置所需loader
$ npm i -D url-loader
$ npm i -D file-loader
$ npm i - D image-webpack-loader
執行build
$ npm run build
未報錯，打開index.html，查看是否成功加載圖片。
加載成功并做了壓縮。
3.sass/scss打包
首先要使用sass需要先安裝sass。
$ export SASS_BINARY_SITE="https://npm.taobao.org/mirrors/node-sass"
//先設置指定下載sass地址（歷史問題）
$ nmp i -D node-sass
//安裝中
index.js
import _ from 'lodash';
import $ from 'jquery';
import './index.sass'
var img1 = document.createElement("img");
img1.src = require("./1.jpg");
document.body.appendChild(img1);
function component() {
var $div = $('<div/>')
// Lodash, currently included via a script, is required for this line to work
$div.html(_.join(['Hello', 'webpack'], ' '));
return $div;
}
$(document.body).append(component());
index.sass
body{
background: #ddd;
color: white;
display: flex;
div{
background: border-box;
}
}
webpack.config.js
var path = require('path');
module.exports = {
// 入口 main.js
entry: './src/index.js',
//輸出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
module: {
loaders: [
{
test: /\.sass$/,
loaders: [
'style-loader',
'css-loader',
'autoprefixer-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg)$/,
//loader: 'url-loader?limit=8192'
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader'
]
}
]
}
};
安裝所需加載器，sass-loader，并打包
$ npm i -D sass-loder
$ npm run build
打包成功后，打開index.html，查看樣式是否編譯成功。
成功了，說明你抄對了。
看了這么多我們大概也能了解到為何需要去設置配置文件了。無非是各種類型的文件的各種打包，在配置文件中設置打包文件的加載器，下載與配置相應的loader進行安裝，以便打包的時候使用。
webpack --help中有webpack --watch命令：
Watch the filesystem for changes，方便開發時，打包項目文件。
有興趣的新手可以體驗一下。
4.所有代碼都要最小化（壓縮）--自動刷新&發布
要實現自動刷新，先安裝webpack-dev-server
$ npm install webpack-dev-server //安裝server
配置server的目標文件
webpack.config.js
var path = require('path');
module.exports = {
// 入口 main.js
entry: './src/index.js',
//輸出
output: {
filename: 'bundle.js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, "dist"), //目標文件夾
compress: true, //是否壓縮：是
port: 9000 //設置端口
}, //配置server的目標文件
module: {
loaders: [
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'autoprefixer-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg)$/,
//loader: 'url-loader?limit=8192'
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader'
]
}
]
}
};
執行命令行
$ ./node_modules/.bin/webpack-dev-server
輸入命令后，項目運行，打開http://localhost:9000，本地修改項目文件時，瀏覽器會自動刷新頁面。
最后一步：發布deploy
當項目需要進行發布的時候，目前的編譯打包雖然已經完成，但細心的童鞋會發現，dist中的文件其實很大。webpack提供了webpack -p命令行來做最后的項目文件最小化。
$ webpack -p //最小化項目文件，用作生產環境
執行之后再打開index.html，發現加載的bundle.js，比build之后的更加小。也更加符合生產環境的需求。
最后提交代碼git add,git commit,git push到遠程倉庫。
5.緩存控制
為了生成緩存的bundle.js，通常做法就是文件名+hash，配置中可以直接進行配置。
webpack.config.js
var path = require('path');
module.exports = {
// 入口 main.js
entry: './src/index.js',
//輸出
output: {
filename: 'bundle-[hash].js', //具有緩存控制的輸出
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
},
module: {
loaders: [
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'autoprefixer-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg)$/,
//loader: 'url-loader?limit=8192'
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader'
]
}
]
}
};
與此同時，當bundle.js文件名有了hash之后，每次修改hash都不同。路徑手動去改就比較麻煩了。這里我們可以使用插件來自動生成index.html文件，路徑也隨之自動生成。操作入下：
安裝插件：html-webpack-plugin
$ npm i -D html-webpack-plugin
webpack.config.js
ar path = require('path');
var HtmlwebpackPlugin = require('html-webpack-plugin');
module.exports = {
// 入口 main.js
entry: './src/index.js',
//輸出
output: {
filename: 'bundle-[hash].js',
path: path.resolve(__dirname, 'dist')
},
devServer: {
contentBase: path.join(__dirname, "dist"),
compress: true,
port: 9000
},
plugins: [
new HtmlwebpackPlugin({
title: "webpack-demo", //設置生成的html，title
filename: "index.html" //html命名
})
],
module: {
loaders: [
{
test: /\.scss$/,
loaders: [
'style-loader',
'css-loader',
'autoprefixer-loader',
'sass-loader'
]
},
{
test: /\.(png|jpg)$/,
//loader: 'url-loader?limit=8192'
loaders: [
'file-loader?hash=sha512&digest=hex&name=[hash].[ext]',
'image-webpack-loader'
]
}
]
}
};
刪除dist/index.html之后
$ webpack -p //打包、最小化
執行結果
打開index.html，這時候觀察bundle.js是否成功引入。
至此，關于webpack的一些基本用法就講到這里了。還有一些webpack插件，大家可以去看看阮一峰webpack教程。
