初試webpack打包

第一次接觸webpack，學習了如何用webpack打包，記錄一下過程。

1.在項目根目錄安裝webpack

$ npm install webpack --save-dev

2.新建一個webpack.config.js

3.根據需要安裝需要的加載器，並在webpack.config.js的module中進行配置，例如加載babel。

$ npm install babel-loader --save-dev

　webpack.config.js文件

var webpack = require('webpack');
var commonsPlugin = new webpack.optimize.CommonsChunkPlugin('common.js');
module.exports = {
//頁面入口文件配置
	entry: {
		'a':'./src/a.js',
	},
//入口文件輸出配置
	output: {
		path: './build',
		filename: '[name].js'
	},
	module: {
	  	loaders: [
	  	{ test: /\.js|jsx$/, loaders: ['babel'] },
  	]
	},
	resolve:{
		extensions: ['', '.js', '.json', '.scss']
	}
}

webpack簡單的安裝完成后，看一下項目目錄

src下的a.js和b.js

a.js:

var b = require("./b");
console.log(b.add(1,2));

b.js:

module.exports.add=function(a,b){
	return a + b;
}

因為之前webpack.config.js已經配置好，然后

$ webpack -w

我們會發現在build下生成一個a.js,index.html中引入了這個文件，控制台中會輸出3。

簡單的記錄，如果有誤，大家可以糾正，謝謝哈