一、关于基本概念（入门文章：https://segmentfault.com/a/1190000006178770#articleHeader4）
Grunt和Gulp的工作方式是：在一个配置文件中，指明对某些文件进行类似编译，组合，压缩等任务的具体步骤，工具之后可以自动替你完成这些任务。
Webpack的工作方式是：把你的项目当做一个整体，通过一个给定的主文件（如：index.js），Webpack将从这个文件开始找到你的项目的所有依赖文件，使用loaders处理它们，最后打包为一个（或多个）浏览器可识别的JavaScript文件。
如果实在要把二者进行比较，Webpack的处理速度更快更直接，能打包更多不同类型的文件。
npm install -g webpack-dev-server
npm install webpack-dev-server --save
webpack-dev-server --content-base src --inline --hot（可以直接访问http://localhost:8081了）(参考第四部分)
1） 在搭建React环境过程中，发现npm全局安装模块的时候报‘maximum call stack size’错误，上网查了很久未找到合适解决办法，后来简单粗暴的将node和npm升级到最新版本，问题没有再出现。
2） 全局安装webpack时，出现警告如图，查了下是因为 fsevent是mac osx系统的，在win或者Linux下使用了 所以会有警告，忽略即可：
3） 全局安装webpack server时，也有警告，上网查了查，疑似不用搭理就行：
4）在控制台中运行命令“webpack”，出现错误：“ERROR in Entry module not found: Error: Can't resolve 'babel-loader' in.........”
解决方法是在控制台输入命令“npm install babel-loader --save"。
5）遇到webpack-dev-server启动后网页没有实时更新，处理办法如下：
把index.html中bundle.js的本地路径改成网络路径：http://localhost:8080/bundle.js( 本地文件中不存储编译后的最新状态，实时编译后的文件都保存到了内存当中 )。
三、关于webpack的一个错误（错误折磨很久，这篇真的解决了问题）：
ERROR in multi ./hello.js bundle.js Module not found: Error: Can't resolve 'bundle.js' in ...
1 这是因为我们没有进入到开发模式,使用命令：webpack --mode development或者是生产模式production，这样我进的是开发模式。接着, 命令输入：webpack --mode development，就会以默认路径进行打包，入口文件是./src/index.js，我们生成的文件，是没有src这个文件夹的，这时候需要手动创建，并且在src文件夹中新建一个index.js文件：
最后：找到package.json，添加下面的两条内容，这是因为 webpack --mode development太长了，你每次想默认打包，你需要输入好多(有开发模式和生产模式两种)，就给起个别名，如下图进行配置：
这样通过命令： npm run dev 就会把index.js文件打包成默认的dist文件夹中的main.js。
想不想让你的浏览器监听你的代码的修改，并自动刷新显示修改后的结果，其实Webpack提供一个可选的本地开发服务器，这个本地服务器基于node.js构建，可以实现你想要的这些功能，不过它是一个单独的组件，在webpack中进行配置之前需要单独安装它作为项目依赖 npm install --save-dev webpack-dev-server
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
},
devServer: {
contentBase: "./public", // 本地服务器所加载的页面所在的目录
historyApiFallback: true, // 不跳转
inline: true // 实时刷新
}
} "scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open"
}通过打包后的文件，不容易找到出错的地方，Source Maps就是来帮我们解决这个问题的。通过简单的配置，webpack就可以在打包时为我们生成的source maps，这为我们提供了一种对应编译文件和源文件的方法，使得编译后的代码可读性更高，也更容易调试。
在webpack的配置文件中配置source maps，需要配置devtool，它有以下四种不同的配置选项，各具优缺点，描述如下：
| devtool选项 | 配置结果 |
| source-map | 在一个单独的文件中产生一个完整且功能完全的文件。这个文件具有最好的source map，但是它会减慢打包速度； |
| cheap-module-source-map | 在一个单独的文件中生成一个不带列映射的map，不带列映射提高了打包速度，但是也使得浏览器开发者工具只能对应到具体的行，不能对应到具体的列（符号），会对调试造成不便； |
| eval-source-map | 使用eval打包源文件模块，在同一个文件中生成干净的完整的source map。这个选项可以在不影响构建速度的前提下生成完整的sourcemap，但是对打包后输出的JS文件的执行具有性能和安全的隐患。在开发阶段这是一个非常好的选项，在生产阶段则一定不要启用这个选项； |
| cheap-module-eval-source-map | 这是在打包文件时最快的生成source map的方法，生成的Source Map 会和打包后的JavaScript文件同行显示，没有列映射，和eval-source-map选项具有相似的缺点； |
对小到中型的项目中，eval-source-map是一个很好的选项，再次强调你只应该开发阶段使用它，我们继续对上文新建的webpack.config.js，进行如下配置：
module.exports = {
devtool: 'eval-source-map',
entry: __dirname + "/app/main.js",
output: {
path: __dirname + "/public",
filename: "bundle.js"
}
}1 Loaders是webpack提供的最激动人心的功能之一了。通过使用不同的loader，webpack有能力调用外部的脚本或工具，实现对不同格式的文件的处理，比如说分析转换scss为css，或者把下一代的JS文件（ES6，ES7)转换为现代浏览器兼容的JS文件，对React的开发而言，合适的Loaders可以把React的中用到的JSX文件转换为JS文件。
module: {
rules: [{
test: /\.vue$/, // 一个用以匹配loaders所处理文件的拓展名的正则表达式（必须）
loader: 'vue-loader', // loader的名称（必须）
options: vueLoaderConfig
},
{
test: /\.js$/,
loader: 'babel-loader',
include: [resolve('src')], // 手动添加必须处理的文件（文件夹）或屏蔽不需要处理的文件（文件夹）（可选）
exclude: [resolve('node_modules')]
}
}2 Babel其实是一个编译JavaScript的平台，它可以编译代码帮你达到以下目的：
Babel其实是几个模块化的包，其核心功能位于称为babel-core的npm包中，webpack可以把其不同的包整合在一起使用，对于每一个你需要的功能或拓展，你都需要安装单独的包（用得最多的是解析Es6的babel-env-preset包和解析JSX的babel-preset-react包）。
Babel可以完全在 webpack.config.js 中进行配置，但考虑到babel具有非常多的配置选项，一些开发者支持把babel的配置选项放在一个单独的名为 ".babelrc" 的配置文件中。
//.babelrc
{
"presets": ["react", "env"]
}webpack提供两个工具处理样式表，css-loader 和 style-loader，二者处理的任务不同，css-loader使你能够使用类似@import和url(...)的方法实现require()的功能，style-loader将所有的计算后的样式加入页面中，二者组合在一起使你能够把样式表嵌入webpack打包后的JS文件中。
1 安装： npm install --save-dev style-loader css-loader
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader"
}
]
}4 被称为CSS modules的技术意在把JS的模块化思想带入CSS中来，通过CSS模块，所有的类名，动画名默认都只作用于当前模块。Webpack对CSS模块化提供了非常好的支持，只需要在CSS loader中进行简单配置即可，然后就可以直接把CSS的类名传递到组件的代码中，这样做有效避免了全局污染。
{
test: /\.css$/,
use: [
{
loader: "style-loader"
}, {
loader: "css-loader",
options: {
modules: true, // 指定启用css modules
localIdentName: '[name]__[local]--[hash:base64:5]' // 指定css的类名格式
}
}
]
}.root {
background-color: #eee;
padding: 10px;
border: 3px solid #ccc;
}import React, {Component} from 'react';
import config from './config.json';
import styles from './Greeter.css';// 导入
class Greeter extends Component{
render() {
return (
<div className={styles.root}> // 使用cssModule添加类名的方法
{config.greetText}
</div>
);
}
}
export default Greeter最终 class 名为 styles__title--3zyde。相同的类名也不会造成不同组件之间的污染。
5 Sass 和 Less 之类的预处理器是对原生CSS的拓展，它们允许你使用类似于variables, nesting, mixins, inheritance等不存在于CSS中的特性来写CSS，CSS预处理器可以这些特殊类型的语句转化为浏览器可识别的CSS语句，相关loader：
其实也存在一个CSS的处理平台PostCSS，它可以帮助你的CSS实现更多的功能。举例来说，我们使用PostCSS来为CSS代码自动添加适应不同浏览器的CSS前缀。
1 通过npm安装，然后要在webpack配置中的plugins关键字部分添加插件的一个实例（plugins是一个数组）：
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究')
]HtmlWebpackPlugin--作用是依据一个简单的index.html模板，生成一个自动引用你打包后的JS文件的新index.html。这在每次生成的js文件名称不同时非常有用（比如添加了hash值）。
npm install --save-dev html-webpack-plugin
const HtmlWebpackPlugin = require('html-webpack-plugin');
// ……
plugins: [
new webpack.BannerPlugin('版权所有，翻版必究'),
new HtmlWebpackPlugin({
template: __dirname + "/app/index.tmpl.html" // new 一个这个插件的实例，并传入相关的参数
})
]Hot Module Replacement--webpack里很有用的一个插件，它允许你在修改组件代码后，自动刷新实时预览修改后的效果。
不过配置完这些后，JS模块其实还是不能自动热加载的，还需要在你的JS模块中执行一个Webpack提供的API才能实现热加载，虽然这个API不难使用，但是如果是React模块，使用我们已经熟悉的Babel可以更方便的实现功能热加载。
- Babel和webpack是独立的工具
- 二者可以一起工作
- 二者都可以通过插件拓展功能
- HMR是一个webpack插件，它让你能浏览器中实时观察模块修改后的效果，但是如果你想让它工作，需要对模块进行额外的配额；
- Babel有一个叫做react-transform-hrm的插件，可以在不对React模块进行额外的配置的前提下让HMR正常工作；
①new webpack.HotModuleReplacementPlugin() // 热加载插件
②react-transform-hmr:npm install --save-dev babel-plugin-react-transform react-transform-hmr
③（注意：windows不能创建没有命名的文件，所以用命令行创建文件：type nul>.babelrc）
// .babelrc
{
"presets": ["react", "env"],
"env": {
"development": {
"plugins": [["react-transform", {
"transforms": [{
"transform": "react-transform-hmr",
"imports": ["react"],
"locals": ["module"]
}]
}]]
}
}
}在产品阶段，可能还需要对打包的文件进行额外的处理，比如说优化，压缩，缓存以及分离CSS和JS。对于复杂的项目来说，需要复杂的配置，这时候分解配置文件为多个小的文件可以使得事情井井有条，前面的例子来说，我们创建一个webpack.production.config.js的文件，在里面加上基本的配置，它和原始的webpack.config.js很像，然后在package.json里：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack",
"server": "webpack-dev-server --open",
"build": "NODE_ENV=production webpack --config ./webpack.production.config.js --progress"
}注意：如果是window电脑，build需要配置为"build": "set NODE_ENV=production && webpack --config ./webpack.production.config.js --progress"。
159
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
