webpack 3.X 安装与配置
组件如何接收属性，所有的属性都可以通过this.props对象获取，像下面这样去使用：
<html>
<head>
<meta charset="UTF-8" />
<title>Hello Worldtitle>
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js">script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js">script>
<script src="https://unpkg.com/[email protected]/babel.min.js">script>
head>
<body>
<div id="root">div>
<script type="text/babel">
class MyComponent extends React.Component{
render(){
return (<h1> hello world {this.props.name}h1> )
};
}
ReactDOM.render(
React.createElement(MyComponent,
{
name:"Stan"
}
),
document.getElementById('root')
);
script>
body>
html>官网上说 React is pretty flexible but it has a single strict rule:
All React components must act like pure functions with respect to their props.
props are read-only,还不太清晰，后面再回过头来看。当开始学习propTypes时，发现遇到了很大的阻碍，因我也是Sublime新手，不知道在Sublime中如何去做一些依赖，建一个工程，又尝试了WebStorm，VScode，还是要借助于IDE，学习一下，React的学习先暂停一下，学习一下VScode，还有Webpack，后面一起进行，总之学习不能停。
下面先总结一下webpack的入门：
如果你进到webpack的官网，打开它的documentation页面，你会看到：
bundle your assets/scripts/images/styles.你的那些.js/.css/.png/….它们之间存在有依赖，用webpack 绑到一起后，再使用，变得简洁，这是我最开始的理解。我最后还是下载了VScode
新建一个项目，先要确保你已经安装了node 和 npm ,我的mac上的node 和 npm的版本分别是：
而后需要做的是：
npm init可以先不用过程，直接全部回车结束后，会生成一个package.json的文件，它长这样：
{
"name": "webpack-stater",
"version": "1.0.0",
"description": "explore webpack",
"main": "index.js",
"scripts": {
"dev": "webpack -d --watch",
"prot": "webpack -d"
},
"repository": {
"type": "git",
"url": "git+ssh://[email protected]/stanbers/git-tutorial.git"
},
"keywords": [
"self"
],
"author": "stan",
"license": "ISC",
"bugs": {
"url": "https://github.com/stanbers/git-tutorial/issues"
},
"homepage": "https://github.com/stanbers/git-tutorial#readme",
"devDependencies": {
"webpack": "^3.8.1"
}
}再接下来要去安装webpack ,使用命令：
npm i -D webpack如果第一次安装，可以把它安装成全局的：
npm -g i webpack安装全局的webpack可能会提示你安装失败，提示你没有权限，此时把sudo加上就可以了：
sudo npm -g i webpack然后会提示输入mac的密码，之后就可以正常安装了，安装完成后，可以从上面的package.json文件中看到你安装的最新的webpack 版本，可以看到我安装的是
"devDependencies": {
"webpack": "^3.8.1"
}如果你想看以前的version ，可以用下面的命令：
npm view webpack versions可以看到更多的版本：
这里不会显示所有，如果你想看所有的版本，可以用下面这个命令：
npm view webpack version --json然后就可以看到全部了：
如果你想指定哪个版本，可以用这个命令：
npm i -D webpack@versionnumber到这里就可以用webpack了， 在项目下建立两个文件夹，每个下面分别新建一个js文件，分别是src/app.js 和dis/app.bundle.js
在app.js中：
alert("hello webpack");然后在命令行：
webpack ./src/app.js ./dist/app.bundle.js而后但可以在app.bundle.js中看到上面的alert():
eval("alert(\"hello webpack\");//# sourceURL=[module]\n//# sourceMappingURL=data:application/json;charset=utf-8;base64,eyJ2ZXJzaW9uIjozLCJmaWxlIjoiMC5qcyIsInNvdXJjZXMiOlsid2VicGFjazovLy8uL3NyYy9hcHAuanM/N2FjOSJdLCJzb3VyY2VzQ29udGVudCI6WyJhbGVydChcImhlbGxvIHdlYnBhY2tcIik7XG5cblxuLy8vLy8vLy8vLy8vLy8vLy8vXG4vLyBXRUJQQUNLIEZPT1RFUlxuLy8gLi9zcmMvYXBwLmpzXG4vLyBtb2R1bGUgaWQgPSAwXG4vLyBtb2R1bGUgY2h1bmtzID0gMCJdLCJtYXBwaW5ncyI6IkFBQUEiLCJzb3VyY2VSb290IjoiIn0=\n//# sourceURL=webpack-internal:///0\n");下面的命令：
webpack ./src/app.js ./dist/app.bundle.js -p-p表示生产环境压缩的代码
webpack ./src/app.js ./dist/app.bundle.js -p --watch加上watch后，是去监视app.js，如果app.js更新了，那么app.bundle.js也会实时更新
上面的两种bundle，也可能选择用配置文件的方式来做相同的操作，创建一个配置文件：webpack.config.js
module.exports = {
entry: "./src/app.js",
output:{
filename: "./dist/app.bundle.js"
}
}然后在package.json中更新”scripts”中的代码：
"scripts": {
"dev": "webpack -d --watch",
"prot": "webpack -d"
},dev代表开发，prot代表生产
这个时候当运行:
npm run dev它是等价于
webpack ./src/app.js ./dist/app.bundle.js -p --watch最后项目架构就是这样：
到此了解完了webpack的安装与配置，及运行一个小的demo，后面还有更多需要学习的。