webpack是当下较为火爆的前端构建工具。它类似一个黑盒，可以较为轻松地帮我们解决一些前端构建的重复工作。在某种程度上，它可以代替gulp的功能。但是，想要获得最佳的前端构筑体验，恐怕还是得gulp+webpack才行。
webpack学习起来不算太难，至少在我看来比gulp轻松。它通过配置文件webpack.config.js搭配合适的插件工作。
学习webpack+react，推荐这篇教程：Webpack傻瓜指南（三）和React配合开发。文章中有前两篇的地址。这三篇文章十分优秀，学习之后相信可以比笔者玩得溜(●'◡'●)这里只粗略记录一些心得。
npm
npm是node集成的包管理工具，由package.json配置。可以用"script"选项自定义命令。通过npm install * --save安装的包会成为程序依赖，npm install * --save-dev则会成为开发依赖。它们分别被记录在dependencies和devDependencies中。
在运行npm install时会默认安装两种包。你也可以使用npm install --production来只安装运行依赖包。
webpack核心
入口和出口
webpack配置大体可以分为入口、出口和处理器。一个最简单的webpack配置文件是这样的：
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
filename: 'bundle.js'
}
};
它没有处理器，所以没有任何用处。但是，它已经可以正常运行。你可以这样使用它：
-
webpack开发环境下编译 -
webpack -p产品编译及压缩 -
webpack --watch开发环境下持续的监听文件变动来进行编译(非常快!) -
webpack -d引入source maps
处理器
react和es6语法
webpack使用各种loader和perset来处理文件。它可以替代browserify或者RequireJS的功能。现在，假设我们要用webpack加载和编译CoffeeScript和JSX+ES6。在开始之前确保你安装了react和react-dom
首先，安装loader和其它插件：npm install coffee-loader babel-loader babel-core babel-preset-es2015 babel-preset-react --save-dev
babel-core是babel汇编核心。es2015 preset则可以把es6语法的js代码转换为es5代码。
现在，我们可以写模块代码了。我们的配置文件变成了这样：
// 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文件时省略扩展名，只需要添加resolve.extensions即可
...
resolve: {
// 现在你require文件的时候可以直接使用require('file')，不用使用require('file.coffee')
extensions: ['', '.js', '.json', '.coffee']
}
...
现在，我们可以进行react编程了
css样式和图片
同样的，只要有loader就行了。首先用require()去加载它们
require('./bootstrap.css');
require('./myapp.less');
var img = document.createElement('img');
img.src = require('./glyph.png');
接着配置webpack.config.js
// webpack.config.js
module.exports = {
entry: './main.js',
output: {
path: './build', // 图片和js会放在这
publicPath: 'http://mycdn.com/', // 这里用来生成图片的地址
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的地址则不解析
]
}
};
当你require了CSS(less或者其他)文件，webpack会在页面中插入一个内联的<style>，去引入样式。当require图片的时候，bundle文件会包含图片的url，并通过require()返回图片的url。
更多
去这里看看：webpack-howto
锦上添花
sass
同样，你需要的只是loader
npm install node-sass sass-loader --save-dev
然后...
...
module: {
loaders: [
...
{
test: /\.scss$/,
loaders: ['style', 'css', 'sass']
}
...
]
},
...
开发服务器
webpack的打包速度不是很快，一遍又一遍地运行时一件十分让人烦躁的事情。我们需要一个开发服务器
npm install webpack-dev-server --save-dev
这里的配置会开始有些复杂：
module.exports = {
....
devServer: {
historyApiFallback: true,
hot: true,
inline: true,
progress: true,
},
...
}
在package.json里自定义命令
...
"scripts": {
"start": "webpack-dev-server --hot --inline"
},
...
接下来输入npm start就可以运行服务器了。
第三方库
npm install jquery moment --save-dev
var sub = require('./sub');
var $ = require('jquery');
var moment = require('moment');
结语
webpack的功能远比我们想的要强大，但也因此容易让我们迷失其中。永远不要忘记我们的目的是用这些工具去编写程序，而不是打造更完美的手脚架。但是，在很多时候它确实可以使我们的编程变得更加愉快。
网友评论