一直在用fis3，也能完美滿足目前業務需求。我廠的scrat也有大量的feature貼合業務線。

最近在看React，要打通React的技術棧，學習Webpack是必不可少的了。

從npm上安裝很簡單：

npm install webpack -g

Webpack特色：

<li>模塊化，支持異步和同步</li> <li>Loader，把各種文件拆分成模塊的支持</li> <li>更機智的編譯</li> <li>插件系統，提供各色各樣的插件，毫不遜色的其他打包工具，要什么價什么</li>

簡單demo

先上第一個demo：

cats.js

var cats = ['dave', 'henry', 'martha']; module.exports = cats;

app.js

var cats = require('./cats'); console.log('cats')

webpack登場：

webpack ./app.js app.bundle.js

這命令可以cats.js打包進app.js里面,最后生成app.bundle.js

利用配置文件來操作webpack

-webpack.config.js

module.exports = {entry: './src/app',output: {path: './bin',filename: 'app.bundle'} }

配置完后，在文件夾直接webpack即可

使用loader

loader應該是webpack的預加載工具

module.exports = {entry: './src/app.js',output: {path: './bin',filename: 'app.bundle.js'},module: {loaders: [{test: /\.js$/,exclude: /node_moudles/,loader: 'babel-loader'}]} }

使用plugins

module.exports = {entry: './src/app.js',output: {path: './bin',filename: 'app.bundle.js'},module: {loaders: [{test: /\.js$/,exclude: /node_moudles/,loader: 'babel-loader'}]},plugins: [new webapck.optimize.UglifyJsPlugin({compress: {warnings: false},output: {comments: false}})] }

CONFIGURATION OBJECT CONTENT

可以編寫js，不僅僅是個json對象

entry

基本語法： {context: _dirname + '/app',entry: './entry',output: {path: _dirname + '/dist',filename: 'bundle.js'} }傳入object時 {entry: {page1: './page1',page2: ['./entry1', './entry2']},output: {filename: '[name].bundle.js',chunkFilename: '[id].bundle.js'} }

output

multiple entries {entry: {app: './src/app.js',search: './src/search.js' },output: {filename: '[name].js',path: __dirname + '/built' } }//outpu: ./built/app.js ./built/search.js

output.pubicPath

適用于類似CDN匹配需求 可添加hash繞過緩存機制 output: {path: '/home/project/cdn/assets/[hash]',publicPath: "http://cdn.example.com/assets/[hash]/" }

Watch

webpack有個很牛逼的地方，熱刷新。

配置好文件后，下面命令可以監聽文件變化

webpack --watch

在配置文件里一樣可以實現：

module.exports = {entry: {app: './src/app.js'},output: {filename: 'bundle.js',},watch: true }

在做網頁開發時候，需要用到服務器，webpack提供了webpack-dev-server

安裝很簡單:

npm install webpack-dev-server -g

demo:

webpack-dev-server --host 0.0.0.0 --port 8080 --inline

總結

以上是生活随笔為你收集整理的React技术栈——webpack的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。