第一次接触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