webpack入门及结合react进行开发
重要提示（2017年7月26号更新）
本文介绍的是最新版的3.4.1，并且其中又跟React结合的例子！
写在前边
前端技术更新太快，从几年前的jquery、djto、Prototype到react、vue、angular，自动化工具也是这样从之前的grunt、requireJs到现在的gulp、webpack、jspm、包管理工具也是从之前的bower、npm到现在的yern！技术更新换代特别快，所以我们开发人员每天应该有俩个小时以上来学习技术！
什么是webpack，为什么我们要使用webpack
为什么我们要使用webpack
现今的很多网页其实可以看做是功能丰富的应用，它们拥有着复杂的JavaScript代码和一大堆依赖包。为了简化开发的复杂度，前端社区涌现出了很多好的实践方法
模块化 通过webpack我们使用它可以很好的管理我们的前端代码
loader 通过webpack我们可以通过loader进行编辑我们的模块，把我们的文件或者模块进行编辑，编辑成我们的javascript或者网页能看懂的语言！
通过webpack可以编辑less、sass、postcss等css预处理器。
最后还可以跟我们的react、vue进行结合管理代码
什么是webpack
WebPack说明白点就是模块打包机，可以很好的管理我们的模块，可以对浏览器进行更好的兼容。
开始使用Webpack
现在开始使用最新版的webpack，我写的比较简单希望对你们有所帮助，看完之后可以使用我们的webpack。
安装
首选我们要安装nodeJs，nodeJs中已经给我们下载了npm我们通过npm进行安装管理。
项目初始化
npm init -y
安装webpack
npm install webpack -gd //全局 npm install webpack --save-dev //局部
安装后之后我们就可以进行打包打包使用
创建app.js
import bar from './bar'; bar();
创建bar.js
export default function bar() {
document.write("Hello World")
}
index.html
<html>
<head>
...
</head>
<body>
...
<script src="bundle.js"></script> //bundle使我们进行打包的文件
</body>
</html>
在webpack.config.js中进行配置
module.exports = {
entry: './app.js',//entry引入的文件
output: {
filename: 'bundle.js' //output 打包到的文件
}
}
命令行运行webpack，打开浏览器你会看到我们的Hello World，这就是最简单的webpack使用！
下边结合react进行开发
安装babel-lorder
通过babel我们可以编辑Es6+、jsx等，我们开发现代代码必不可少的一款工具！
npm install --save-dev babel-loader babel-core
在这里我要介绍一下cnpm，我们在配置环境的过程中可能会遇到自己网速慢，或者npm服务器慢的特点，我们可以通过淘宝镜像cnpm进行安装，跟咱们的npm一样不过是淘宝镜像过来的，因此不受外网服务器影响。安装跟npm一样，我们做的额只不过是把前边的npm改成cnpm
安装cnpm
npm install cnpm -gd
转译插件
我们需要安装一些插件才可以进行我们的jsx编辑，因为我们的react就是通过jsx写的
npm install babel-preset-env babel-preset-react --save-dev //淘宝镜像安装 cnpm install babel-preset-env babel-preset-react --save-dev
在主项目录下的babelrc进行配置
{
"presets": ["env","babel-preset-react"]
}
安装 react库
npm install react react-dom --save
这样我们就可以进行react和webpack结合进行模块管理。
Hello World实例
我们的项目结构如下图：
把index.html、bundle.js放在build文件夹下边，我们的入口文件app.js文件地址不变。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<Meta charset="UTF-8">
<Meta name="viewport" content="width=device-width,initial-scale=1.0">
<Meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>webpack</title>
</head>
<body>
<div id="app"></div>
<input type="text">
<script src="/build/bundle.js"></script>
</body>
</html>
app.js
'use strict'
import React from 'react';
import ReactDOM from 'react-dom';
import HelloWorld from './components/HelloWorld';
import './css/main.css';
ReactDOM.render(
<HelloWorld/>,document.getElementById("app")
);
webpack.config.js
module.exports = {
entry: './app.js',output: {
filename: "build/bundle.js"
},module: {
rules: [
{test: /\.js$/,exclude: /node_modules/,loader: "react-hot-loader!babel-loader"}
]
}
}
我们运行webpack watch进行项目启动，我们看到的是本地文件的网址，我们需要安装下边的环境插件启动端口
webpack-dev-server启动端口
我们的webpack启动的端口8080：端口
npm install webpack-dev-server -gd //全局 npm install webpack-dev-server --save-dev //局部 //我们的文件需要在全局进行安装
运行 webpack-dev-server --content-base build/ 默认启动是运行 webpack-dev-server，由于我们创建了文件框架，所以需要指定目录文件运行 --content-base build/这样我们就可以进行文件刷新，发现很不方便，需要进行文件自动刷新，或者模块热更新
首先需要配置webpakc.comfig.js文件
var path = require("path");
......
output: {
path: path.resolve(__dirname,"build"),publicPath: "/assets/",filename: "build/bundle.js"
}
运行命令
webpack-dev-server --content-base build/ --inline
这样就可以进行文件更新，但是这样做每次都大刷页面，还可以更好一点，比如更新其中的一个模块其他的不刷新，
安装react-hot-loader
npm install react-hot-loader --save-dev
继续配置webpack配置文件
rules: [
{test: /\.js$/,loader: "react-hot-loader!babel-loader"},{test: /\.css$/,loader: "style-loader!css-loader"}
]
配置完的大概是这样
var path = require("path");
module.exports = {
devtool:'source-map',entry: './app.js',output: {
path: path.resolve(__dirname,filename: "build/bundle.js"
},loader: "style-loader!css-loader"}
]
}
}
刚开始就说过webpack很强大，我们可以通过安装loader进行处理，比如说css、less、sass等
安装style-loader css-loader
npm install style-loader css-loader --save-dev
这样我们就可以引入css到我们的入口文件，今天遇到一点小坑，因为之前用到是jspm，我在文件后边加了个！
跟我们引入其他模块一样，css也是我们的模块
import './css/main.css';
这样就介绍的差不多了，下边给大家介绍一款webpack模块浏览器调试的小东西，
我们只需要在我们的webpack配置文件中加入下边的代码就可以进行代码调试！
module.exports = {
devtool:'source-map'
}
写在最后
如果觉得对你有所帮助，可以点赞收藏，如果发现哪里写的不好可以在下边评论指出，你的意见就是我继续编写下去的动力，如果有什么问题可以评论指出我会为你进行解答！
个人创建了一个群，因为群二维码有时间限制，大家可以扫描我的个人微信！
