本文基于工作項目開發(fā)，做的整理筆記
在某個節(jié)點萝风，想嘗試一下node藐翎，擺脫jsp的java前端方式材蹬，就切換到了Express框架，后臺依然是java提供API吝镣，但是前端再也不用寫java的controller堤器、jsp頁面了。Good赤惊。之前用gulp做sass、js的打包壓縮凰锡，現(xiàn)在也想整理下項目的結(jié)構(gòu)未舟，用上慢慢熟悉的Webpack圈暗。本文就是做個筆記，兩者如何配合使用裕膀。
前提條件：
你已經(jīng)了解基本的Webpack知識和nodejs的Express员串。
關(guān)于Webpack，可閱讀：Webpack初學(xué)者使用教程昼扛。
關(guān)于Express寸齐，晚些時候才會寫一篇，你可以先去谷歌一下（本文對Express只是一帶而過）抄谐。
編碼環(huán)境：
系統(tǒng)：OS X EI Capitan
版本：10.11.6
我用Webpack做什么
在這里渺鹦，我的需求很簡單。我只是想要webpack幫我做2件事：
- 合并蛹含、打包毅厚、壓縮成多個js
- 將sass轉(zhuǎn)換成css，并打包成一個單獨的css文件
如果你的需求和我不太一樣浦箱，這篇文章可能不太適合你吸耿。不過歡迎你閱讀并給予指導(dǎo)，謝謝酷窥。
先看一下項目結(jié)構(gòu)
我們先看一下原來的項目結(jié)構(gòu)（不帶webpack）咽安，然后再看一下webpack將用在哪里。
myProject
| - app
??| - controllers
??| - models （如果不連接數(shù)據(jù)庫蓬推，純粹調(diào)用API接口妆棒，這個就沒有）
??| - schemas （如果不連接數(shù)據(jù)庫，純粹調(diào)用API接口拳氢，這個就沒有）
??| - views
| - bin
??| - www
| - config
??| - config.js
| - node_modules （項目所需模塊）
| - routes
??| - routes.js
| - static
??| - build
??| - fonts
??| - images
??| - js
??| - sass
| - test
| - app.js
| - package.json
我的大概就這么多募逞，省略掉了部署時pm2的配置文件process.json，還有一些log文件馋评。如果你還有用bower管理jquery放接，bootstrap等可能會有.bowerrc，bower.json留特。如果你還用了git可能會看到.gitignore文件纠脾。如果你還有用...
這篇文章的目的就是重做static（靜態(tài)文件）這一塊內(nèi)容，將webpack整合進來蜕青，讓它為我們的項目服務(wù)苟蹈。所以static文件夾的結(jié)構(gòu)將會變成下面這個樣子。（其他文件都沒有改變右核，包括app.js）
| - static
??| - build （打包出來的js慧脱、css放這里）
??| - fonts
??| - images
??| - node-modules （項目所需模塊）
??| - js
??| - sass
??| - package.json
??| - webpack.config.dev.js
??| - webpack.config.prod.js
開發(fā)時如何使用呢
我前面說了，我不去改變原有的express項目結(jié)構(gòu)贺喝。只是重新構(gòu)建static文件夾菱鸥，改變它的內(nèi)容宗兼，webpack僅僅在這里面起作用，完全不會影響到外面氮采。在開發(fā)的時候殷绍，你可以選擇兩種使用方式：
每次js或sass文件改動，就執(zhí)行打包鹊漠，重新生成一次主到。
只需要穩(wěn)定跑起express應(yīng)用服務(wù)，然后不斷的對靜態(tài)文件打包躯概、打包登钥、打包...跑起一個express應(yīng)用服務(wù)，再跑起一個webpack的server楞陷。
開發(fā)時怔鳖，修改頁面的引用，比如說
<link rel="stylesheet" href="http://localhost:8080/styles.css">
<script type='text/javascript' src='http://localhost:8080/main.js'></script>
（其中固蛾，localhost:8080是webpack dev server）
若使用后者的方式结执，就需要在部署時，修改相關(guān)引用文件的路徑艾凯。
這里献幔，可以做一個變量，根據(jù)NODE_ENV是不是為dev趾诗，自動去做不一樣的路徑引用蜡感。
你可能會說這什么方法，好像不是很好恃泪。有沒有更好的方法呢郑兴？
很抱歉的說，目前贝乎，我只是用這個方法情连。我在谷歌上搜了一些其他方法，有些我弄到最后都沒有成功览效，也許是我哪里配置錯了却舀；有些是覺得操作起來好繁瑣，代碼有需要混在node那邊锤灿，幾個引用幾個配置挽拔。如果nodejs的express本身不是非常熟悉的話，感覺一團亂但校。（到時候想丟掉webpack螃诅，又有點懵逼）
選擇這樣一個方式，還是有些好處的，比如說：
- express那邊是express术裸，靜態(tài)資源webpack這邊就是webpack兩邊不影響空执。我想丟掉webpack，去用gulp穗椅、去用grunt，輕輕松松奶栖∑ケ恚或者我就是丟掉，什么都不用了宣鄙。
- 也是因為上面這個原因袍镀，代碼更清晰。別人上手或者接手項目進行開發(fā)冻晤，也非常容易苇羡。
相關(guān)命令跑起webpack
這篇文章并不是去關(guān)注express如何用的，你可以谷歌搜索閱讀相關(guān)文章鼻弧。Express這個我還沒有整理出來设江，我也是個菜鳥??????，晚些我再學(xué)習(xí)學(xué)習(xí)攘轩，整理一篇叉存。
關(guān)于webpack的配置，你可以閱讀我之前的一篇筆記：Webpack初學(xué)者使用教程度帮，這里不會詳細(xì)的介紹了歼捏。
這里對跑起webpack的命令重復(fù)一遍。首先你要進入到static文件夾笨篷，為它生成一個package.json：
$ npm init
然后我們安裝一遍需要的模塊瞳秽，命令如下：
$ npm install -g webpack webpack-dev-server （如果你全局沒有安裝的話，跑一下）
$ npm install --save-dev webpack style-loader css-loader sass-loader node-sass
$ npm install --save-dev extract-text-webpack-plugin webpack-dev-server
然后我們?nèi)?chuàng)建webpack.config.dev.js率翅，webpack.config.prod.js练俐，并修改相應(yīng)內(nèi)容，如下：
$ touch webpack.config.dev.js webpack.config.prod.js
下面是webpack.config.dev.js的內(nèi)容：
// webpack.config.dev.js
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin')
module.exports = {
devtool: 'cheap-eval-source-map',
entry: [
'webpack-dev-server/client?http://localhost:8080',
'webpack/hot/dev-server',
'./js/index'
],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
plugins: [
new webpack.HotModuleReplacementPlugin(),
new ExtractTextPlugin("styles.css")
],
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
// 看到這個注釋了么安聘，額外提一點
// 如果你在 sass那里用了susy痰洒，你就必須用上面的寫法；如果沒有用浴韭，可以使用下面這種寫法
// {
// test: /\.scss$/,
// loader: ExtractTextPlugin.extract('style-loader', 'css-loader', 'sass-loader')
// },
]
},
devServer: {
contentBase: './build',
hot: true
}
}
下面是webpack.config.prod.js的內(nèi)容：
// webpack.config.prod.js
var path = require('path')
var webpack = require('webpack')
var ExtractTextPlugin = require('extract-text-webpack-plugin');
module.exports = {
devtool: 'source-map',
entry: ['./js/index'],
output: {
path: path.join(__dirname, 'build'),
filename: 'bundle.js'
},
plugins: [
new webpack.optimize.UglifyJsPlugin({
minimize: false,
compressor: {
warnings: false,
},
}),
new webpack.optimize.OccurrenceOrderPlugin(),
new ExtractTextPlugin("styles.css"),
new webpack.DefinePlugin({
'process.env.NODE_ENV': JSON.stringify('production')
})
],
module: {
loaders: [
{
test: /\.scss$/,
loader: ExtractTextPlugin.extract('style', 'css!sass')
}
]
}
}
然后我們?nèi)ackage.json中加兩個script丘喻，簡化一下跑起server和打包文件的命令。如下：
...
"scripts": {
"build": "webpack --config webpack.config.prod.js",
"dev": "webpack-dev-server --config webpack.config.dev.js"
},
...
之后念颈，只要通過下面的命令就可以執(zhí)行：
$ npm run dev （跑dev server）
$ npm run build （跑build production泉粉，進行打包）
好了，開發(fā)的時候，可以盡情的玩耍了嗡靡。
是否還有疑問
會不會對webpack在這里的這種使用方式跺撼，還有疑問？“什么讨彼！webpack就用在static這里歉井，而且僅僅是在這里而已。有沒有一個更好的解決方案哈误，一句命令跑起nodejs的同時哩至，順便可以帶起來webpack，跑起一個webpack-dev-server蜜自。也就是說菩貌，簡單的在app.js里引用webpack-dev-middleware，webpack-hot-middleware重荠，加幾句代碼去搞定它箭阶。
這里，我也希望有更好的方式戈鲁。暫時仇参，我就是用上面那個方式開發(fā)。
我之前也閱讀了相關(guān)文章婆殿，比如在express服務(wù)中搭建webpack-dev-server冈敛，Using react-hot-loader with a webpack-dev-server and a node server。
題外話鸣皂，這個項目的sass里抓谴，我還想使用susy去做柵格化布局，代替bootstrap的這一部分寞缝。webpack安裝使用susy也非常方便癌压，研究好了也會做一個筆記。
到這里荆陆，就先結(jié)束了滩届。
學(xué)習(xí)是一條漫漫長路，每天不求一大步被啼，進步一點點就是好的帜消。
