Webpack 筆記

Webpack的使用場景是單頁應用，若是是多網頁使用webpack會很痛苦，對於文件的切換等，你須要寫多個html輸出配置。違背了Webpack的初衷。all is component.

webpack is a module bundler.

目錄結構：

.
├── build  #編譯打包以後的輸出
│   ├── bundle.js
│   └── index_.html
├── css #css
│   ├── indexv5_6.css
│   └── indexv8.css
├── index.html
├── node_modules
│   ├── css-loader
│   ├── html-webpack-plugin
│   ├── style-loader
│   ├── uglify-loader
│   ├── webpack
│   ├── webpack-load-plugins
│   └── zepto
├── package.json #npm script
├── src    ＃源文件
│   ├── test.js
│   └── zepto.min.js
└── webpack.config.js #配置文件

{
  "name": "uranus_ebiz",
  "version": "1.0.0",
  "description": "test webpack",
  "scripts": {
    "start": "webpack --config webpack.config.js --progress --colors"
  },
  "author": "ty4z2008",
  "license": "MIT",
  "dependencies": {
    "zepto": "^1.2.0"
  },
  "devDependencies": {
    "css-loader": "*",
    "html-webpack-plugin": "^2.22.0",
    "style-loader": "*",
    "uglify-loader": "^1.3.0",
    "webpack": "*",
    "webpack-load-plugins": "^0.1.2"
  }
}

編輯好package.json後執行npm install。

//webpack.config.js
const webpack = require("webpack");
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
	entry:["./src/zepto.min.js","./src/test.js"],//入口文件配置
	output:{//輸出配置
		filename:"bundle.js",
		path:__dirname+"/build/"
	},
	module:{
		loaders:[//加載器
			{test:/\.css$/,loader:"style!css"} //parse css
		]
	},
	plugins:[//插件項
		new webpack.optimize.UglifyJsPlugin({
			compress:{
				warnings:false,
			},
			output:{
				comments:false
			}
		}),
		new HtmlWebpackPlugin({
			filename:'index_.html', //輸出的文件名
			inject:'body',//inject all scripts into the body
			hash:true //文件hash後綴
		})
	]
}

最後運行：npm start便可

參考資料： Webpack tutorials webpack tips