這篇文章里，使用requirejs對(duì)項(xiàng)目進(jìn)行了打包凄贩，現(xiàn)在替換為 webpack 進(jìn)行打包：
可以看到項(xiàng)目文件夾下多了 package.json 和 webpack.config.js
文件疲扎，以及 node_modules 文件夾捷雕。
我在package.json 寫入了webpack 打包所需要的依賴，以及定義了 scripts 字段非区，以便更方便的執(zhí)行 webpack盹廷，但是使用webpack 之前，你還要 編輯 webpack.config.js 文件管怠，眾所周知缸榄，webpack 最重要的就是 如何寫配置文件了：
const path = require('path'), //引入node 原生模塊path甚带，用來生成與當(dāng)前系統(tǒng)相適應(yīng)的絕對(duì)路徑
ExtractTextPlugin = require('extract-text-webpack-plugin'), //抽取 CSS 的插件
WebpackNotifierPlugin = require('webpack-notifier'); //webpack 編譯提示插件
let base = { //下面的 entry 入口字段佳头，可以是字符串晴氨、對(duì)象、數(shù)組亭珍、函數(shù)等 枝哄，這里使用 對(duì)象形式
index: './src/js/app/index.js'
}
module.exports = {
devtool: 'source-map', //配合 target 用來生成source-map 文件，以便 開發(fā)調(diào)試 debug 等众羡， devtool 意指 開發(fā)工具
target: 'web',
entry: base,
output: { //指定輸出目錄瘪贱，和文件名
path: path.resolve(__dirname, 'dist'),
filename: '[name].js'
},
resolve: { //resolve字段最常用的就是 alias （別名）屬性纱控，用來把一些冗長(zhǎng)的路徑替換為簡(jiǎn)單的字符，以便js中引入模塊時(shí)更簡(jiǎn)潔
alias: {
gotop: path.resolve(__dirname, 'src/js/com/gotop.js'),
carousel: path.resolve(__dirname, 'src/js/com/carousel.js'),
waterfall: path.resolve(__dirname, 'src/js/com/waterfall.js')
}
},
plugins: [ //在最開始 require 插件后菜秦，這里還要在 plugins 字段中甜害，創(chuàng)建插件實(shí)例
new WebpackNotifierPlugin({
title: 'Webpack 編譯成功',
alwaysNotify: true
}),
new ExtractTextPlugin({
filename: "[name].css",
disable: false,
allChunks: true
})
],
module: { //webpack 2 對(duì)比 webpack 1 在 module 字段這里做了改進(jìn)，更符合邏輯和語義化
rules: [
{
test: /\.css$/,
use: ExtractTextPlugin.extract({ //以便在這里使用插件對(duì)象定義的的方法
fallback: 'style-loader',
use: {
loader: 'css-loader',
options: {
sourceMap: true
}
}
})
}
]
}
}
最終輸出的 js 文件只有一個(gè)球昨，但是會(huì)有上萬行代碼：
因?yàn)槠渲邪?jQuery 源碼尔店，以及對(duì) AMD 規(guī)范，也就是對(duì)requirejs 語法的處理主慰，否則我的模塊中使用的 define 等模塊定義的語法嚣州，瀏覽器當(dāng)然是不認(rèn)識(shí)的。
注意這里 雖然模塊中還是用的AMD規(guī)范共螺，但我并沒有引入 requirejs 源碼，因?yàn)槭紫?webpack 原生支持了 CommonJs 藐不、AMD 等模塊風(fēng)格匀哄，編譯時(shí)會(huì)自動(dòng)識(shí)別進(jìn)行處理，最終輸出的打包文件中雏蛮，雖然引入沒有requirejs源碼涎嚼，但是 webpack 做了類似的定義，最終在html 中引入打包好的 js 文件挑秉，瀏覽器成功運(yùn)行法梯。
