webpack-howto
Tip：
本文是 webpack-howto 的原文，我觉得这篇文章写得非常好，确实算是目前学习 webpack 入门的必读文章。直接收录之。
本教程的目标这是一本教你如何应用webpack到你的项目中的工具书。它包含了我们在Instagram中用到的绝大多数的内容。
我的建议：这个教程作为你第一个webpack的文档，学习完以后去看它的官方文档，了解更详细的说明。
学习的前提它支持AMD和CommonJS，以及其他的模块系统(Angular, ES6)。如果你不太熟悉如何使用，就用CommonJS吧。
2. 对于习惯Browserify的人可以这样使用Webpack下面的命令是等价的:
browserify main.js > bundle.js
webpack main.js bundle.js
然而，webpack要比Browserify强大。所以一般情况下你需要建立一个webpack.config.js文件来配置webpack。
// webpack.config.js module.exports = { entry: './main.js', output: { filename: 'bundle.js' } };
这就是单纯的JS，所有写这个配置文件毫无压力。
3. 如何调用webpack选择一个目录下有webpack.config.js文件的文件夹，然后运行下面的命令:
webpack可以和browserify、RequireJS一样作为一个loader(加载工具)来使用。下面我们来看下如何使用webpack去加载、编译CoffeeScript和JSX+ES6。(这里你必须先 npm install babel-loader coffee-loader):
你也要看下babel-loader的介绍，它会作为一个开发环境下的依赖加载到我们的项目中(run npm install babel-core babel-preset-es2015 babel-preset-react)
// webpack.config.js module.exports = { entry: './main.js', // 入口文件 output: { filename: 'bundle.js' // 打包输出的文件 }, module: { loaders: [ { test: /\.coffee$/, // test 去判断是否为.coffee的文件,是的话就是进行coffee编译 loader: 'coffee-loader' }, { test: /\.js$/, // test 去判断是否为.js,是的话就是进行es6和jsx的编译 loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] } };
如果你希望在require文件时省略文件的扩展名，只需要在webpack.config.js中添加 resolve.extensions 来配置。
// webpack.config.js module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, module: { loaders: [ { test: /\.coffee$/, loader: 'coffee-loader' }, { test: /\.js$/, loader: 'babel-loader', query: { presets: ['es2015', 'react'] } } ] }, resolve: { // 现在你require文件的时候可以直接使用require('file')，不用使用require('file.coffee') extensions: ['', '.js', '.json', '.coffee'] } };
5. Css样式和图片的加载首先你需要用require()去加载你的静态资源(named as they would with node's require()):
require('./bootstrap.css'); require('./myapp.less'); var img = document.createElement('img'); img.src = ('./glyph.png');
当你require了CSS(less或者其他)文件，webpack会在页面中插入一个内联的<style>，去引入样式。当require图片的时候，bundle文件会包含图片的url，并通过require()返回图片的url。
但是这需要你在webpack.config.js做相应的配置(这里还是使用loaders)
// webpack.config.js module.exports = { entry: './main.js', output: { path: './build', // 图片和js会放在这 publicPath: '', // 这里用来生成图片的地址 filename: 'bundle.js' }, module: { loaders: [ { test: /\.less$/, loader: 'style-loader!css-loader!less-loader' }, // 用!去链式调用loader { test: /\.css$/, loader: 'style-loader!css-loader' }, {test: /\.(png|jpg)$/, loader: 'url-loader?limit=8192'} // 内联的base64的图片地址，图片要小于8k，直接的url的地址则不解析 ] } };
6. 功能标识（Feature flags）项目中有些代码我们只为在开发环境（例如日志）或者是内部测试环境（例如那些没有发布的新功能）中使用，那就需要引入下面这些魔法全局变量（magic globals）：
if (__DEV__) { console.warn('Extra logging'); } // ... if (__PRERELEASE__) { showSecretFeature(); }
同时还要在webpack.config.js中配置这些变量，使得webpack能够识别他们。
// webpack.config.js // definePlugin 会把定义的string 变量插入到Js代码中。 var definePlugin = new webpack.DefinePlugin({ __DEV__: JSON.stringify(JSON.parse(process.env.BUILD_DEV || 'true')), __PRERELEASE__: JSON.stringify(JSON.parse(process.env.BUILD_PRERELEASE || 'false')) }); module.exports = { entry: './main.js', output: { filename: 'bundle.js' }, plugins: [definePlugin] };
配置完成后，就可以使用 BUILD_DEV=1 BUILD_PRERELEASE=1 webpack来打包代码了。
值得注意的是，webpack -p 会删除所有无作用代码，也就是说那些包裹在这些全局变量下的代码块都会被删除，这样就能保证这些代码不会因发布上线而泄露。
如果你有两个页面：profile和feed。如果你希望用户访问profile页面时不加载feed页面的代码，那就需要生成多个bundles文件：为每个页面创建自己的“main module”（入口文件）。
相关文章
精彩导读
热门资讯
关注我们
