初试webpack打包

第一次接触webpack，学习了如何用webpack打包，记录一下过程。

1.在项目根目录安装webpack

$ npm install  webpack --save-dev

2.新建一个webpack.config.js

3.根据需要安装需要的加载器，并在webpack.config.js的module中进行配置，例如加载babel。

1	$ npm  install  babel-loader --save-dev

　webpack.config.js文件

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21

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:

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

b.js:

1 2 3

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

因为之前webpack.config.js已经配置好，然后

1	$ webpack -w

我们会发现在build下生成一个a.js,index.html中引入了这个文件，控制台中会输出3。

简单的记录，如果有误，大家可以纠正，谢谢哈

http://www.cnblogs.com/huyawei/p/5469426.html