React环境搭建（一）：webpack
author: lordkhan
date: 2017-02-08
reference: React由0到1 by 随风溜达的向日葵
github: hellojianshu/react-demo
参考《React由0到1》这篇文章，开始React开发环境的搭建。
$1 安装配置node.js
$1-1 安装node.js
到node官网下载node.js，安装。
$1-2 全局安装webpack包
npm install webpack -g
如果在国内的话，建议用淘宝的镜像，安装包，你懂得。国内替代命令：
npm install cnpm -g
# cnpm 是使用国内镜像安装包, -ddd 是显示详细的安装过程
cnpm install webpack -g -ddd
$1-3 新建node项目
新建一个文件夹，cd 进入后，运行：
npm init
国内替代命令：
cnpm init -ddd
然后一律回车，走默认选项就好。
$1-4 配置node项目
修改package.json文件，添加项目包：
{
"name": "react-demo",
"version": "1.0.0",
"description": "react-demo",
"main": "index.js",
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1"
},
"repository": {
"type": "git",
"url": "git+https://github.com/hellojianshu/react-demo.git"
},
"author": "hello jianshu",
"license": "MIT",
"bugs": {
"url": "https://github.com/hellojianshu/react-demo/issues"
},
"homepage": "https://github.com/hellojianshu/react-demo#readme",
"devDependencies": {
"webpack": "^1.13.3",
"css-loader": "^0.25.0",
"style-loader": "^0.13.1",
"webpack-dev-server": "^1.16.2"
}
}
$1-5 安装包
运行命令：
npm install
国内替代命令：
cnpm install -ddd
$2 webpack——测试运行
先写一个index.html：
<!DOCTYPE>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
<script src="bundle.js"></script>
</body>
</html>
然后添加一个entry.js[1]：
require("!style!css!./style.css");
document.write('<h1>hello webpack</h1>');
接着添加一个style.css：
h1{
color:red;
}
运行以下命令：
webpack ./entry.js bundle.js
就会发现在目录中生成了一个bundle.js文件。浏览器中打开index.html就会看到执行效果：
webpack执行效果
$3 webpack——利用分析工具打包
增加一个名为module.js的文件：
module.exports = 'It works from module.js.'
在原来的entry.js增加引用：
require("!style!css!./style.css");
document.write('<h1>hello webpack</h1>');
//新增对module.js的引用
document.write(require('./module.js'));
然后同样执行webpack打包命令：
webpack ./entry.js bundle.js
然后在打开index.html，会发现我们新增加的module.js的内容被正确输出。这是因为我们在页面中通过nodejs的require的方式引入的module.js，而使用webpack打包时会自动在依赖关系中引入module.js。
$4 webpack——加载器
webpack提供了一个非常强大的loader功能，这个功能可以用于管理各种依赖关系模块，在webpack中所有的文件都视作一个模块。
首先npm导入webpack loader：
npm install css-loader style-loader
添加一个用于测试的style.css文件：
h1{
color:red;
}
在entry.js中添加引用：
require("!style!css!./style.css");//添加对css的引用
document.write('<h1>hello webpack</h1>');
document.write(require('./module.js'));
使用命令行打包：
webpack ./entry.js bundle.js --module-bind 'css=style!css'
会发现css的样式生效了。可以将繁琐的“!style!css!./style.css”简写成"./style.css"[2]。
$5 使用配置管理
webpack同样可以使用标准化配置文件来替代命令行中的各种参数。
webpack的配置文件是nodejs的文件，通常命名为 webpack.config.js。我们在工程中增加配置文件：
module.exports = {
entry: './entry.js',//定义要引入的js文件
output: {
path: __dirname,
filename: 'bundle.js' //定义要输出的js文件
},
module: {
loaders: [//定义加载内容
{test: /\.css$/, loader: 'style!css'}
]
}
}
现在，我们在命令行中输入webpack就可以实现和前面一样的打包[3]。
$5 webpack——丰富打包输出内容
可以使用：
webpack --progress --colors
命令来丰富打包输出的内容，更容易了解出现的问题。效果如下：
webpack带运行情况与颜色高亮
$6 webpack——监听更新模式
在我们进行编码开发的时候，每次对文件的编辑我们都想立即看到编译效果，如果每次编辑都要去打包，会非常麻烦。webpack提供了一个监听模式（类似grunt的watch），用于监听每次对文件的修改，修改后会立即进行增量更新。启用监听模式，以便能自动实时编译：
webpack --progress --colors --watch
监听模式使用的是内存增量更新。webpack会将所有需要打包的文件copy到内存，然后监控文件修改，如果文件发生了修改，会将修改的文件替换内存中的对应文件。因此开发完之后，切记进行一次手动打包才能生效。
$7 webpack——开发环境模式
webpack更强大的是，他整合了nodejs的express提供了一个静态服务器。（虽然没有官方正式，我觉得webstrom和微信本地开发环境都是整合的nodejs的express）
使用了开发环境模式，我们所有的动态修改和操作都可以实时看到效果，并且解决了静态资源各种路径引用的问题。首先npm安装工具：
npm install webpack-dev-server -g
国内替代命令：
cnpm install webpack-dev-server -g -ddd
然后使用命令行工具启用开发环境：
webpack-dev-server --progress --colors
webpack的开发环境模式很强悍，比使用--watch更犀利的地方在于可以实现编辑即可见。浏览器立即同步刷新运行。开发环境模式可以延伸到生产环境实现代码同步级别的热部署，效果如下：
webpack开发环境模式
要注意的是，此时不是直接在浏览器中打开html文件，而是根据打开本地的服务器，例如上例中，打开
http://localhost:8080/webpack-dev-server/
如果要自定义端口，运行：
webpack-dev-server --progress --colors --port 3000
$8 webpack拓展
$8-1 输出调试信息
webpack --display-error-details
路径配置最好使用绝对路径，建议通过 path.resolve(__dirname, "app/folder") 或 path.join(__dirname, "app", "folder") 的方式来配置，以兼容 Windows 环境。
$8-2 webpack插件
webpack的常规功能无法满足需求时，可以开发或使用webpack插件。一个插件的标准格式：
function MyPlugin(options) {
// Configure your plugin with options...
}
MyPlugin.prototype.apply = function(compiler) {
compiler.plugin("compile", function(params) {
console.log("The compiler is starting to compile...");
});
compiler.plugin("compilation", function(compilation) {
console.log("The compiler is starting a new compilation...");
compilation.plugin("optimize", function() {
console.log("The compilation is starting to optimize files...");
});
});
compiler.plugin("emit", function(compilation, callback) {
console.log("The compilation is going to emit files...");
callback();
});
};
module.exports = MyPlugin;
$8-3 编辑器的文件缓存
有的编辑器有文件缓存的功能，在编辑完毕保存之后并不会实时的更新磁盘文件，这样的就导致webpack的开发环境无法同步更新文件。
例如webstorm，需要到File->settings->System Settings，将Use "safe write"的勾选去掉。
网友评论