依附网站：https://github.com/theJian/build-a-hn-front-page
第一步：初始化项目 npm init
安装 webpack
npm install --save-dev webpack@3
Q: 什么时候用--save-dev，什么时候用--save？
A: --save-dev 是你开发时候依赖的东西，--save 是你发布之后还依赖的东西。看这里
第二步：然后在项目的根目录下建一个名为webpack.dev.config.js（webpack开发配置文件）
const path = require('path');
module.exports = {
/*入口*/
entry: path.join(__dirname, 'src/index.js'),
/*输出到dist文件夹，输出文件名字为bundle.js*/
output: {
path: path.join(__dirname, './dist'),
filename: 'bundle.js'
}
}
然后在项目根目录新建一个src文件夹，建立一个index.js 并写入
document.getElementById('app').innerHTML = "Webpack works"，然后再运行命令 webpack --config webpack.dev.config.js
我们可以看到生成了dist文件夹和bundle.js
第三步：在dist文件夹下面新建一个index.html 在里面写入
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<div id="app"></div>
<script type="text/javascript" src="./bundle.js" charset="utf-8"></script>
</body>
</html>
index.html
把入口文件 index.js 经过处理之后，生成 bundle.js。就这么简单。
babel
Babel 把用最新标准编写的 JavaScript 代码向下编译成可以在今天随处可用的版本。 这一过程叫做“源码到源码”编译， 也被称为转换编译。
通俗的说，就是我们可以用ES6, ES7等来编写代码，Babel会把他们统统转为ES5。
- babel-core 调用Babel的API进行转码
- babel-loader
- babel-preset-es2015 用于解析 ES6
- babel-preset-react 用于解析 JSX
- babel-preset-stage-0 用于解析 ES7 提案
npm install --save-dev babel-core babel-loader babel-preset-es2015 babel-preset-react babel-preset-stage-0
新建babel配置文件.babelrc，并且在里面写入
{
"presets": [
"es2015",
"react",
"stage-0"
],
"plugins": []
}
然后修改webpack.dev.config.js，增加babel-loader！
/*src文件夹下面的以.js结尾的文件，要使用babel解析*/
/*cacheDirectory是用来缓存编译结果，下次编译加速*/
module: {
rules: [{
test: /\.js$/,
use: ['babel-loader?cacheDirectory=true'],
include: path.join(__dirname, 'src')
}]
}
现在可以简单的做一个测试，看是否能够将es6的写法转成es5，修改src/index.js
var func = str => {
document.getElementById('app').innerHTML = str;
};
func('我现在在使用Babel!');
此时别忘记了再实行一个打包命令 webpack --config webpack.dev.config.js
然后会报错
image.png
原因竟然是因为babel-loader的版本过高，退回低版本就行了
npm uninstall babel-loader
npm install babel-loader@7.1.5
然而在查看bundle.js里面去看，并没看到转换的语法.......
react
npm install --save react react-dom
修改 src/index.js 使用react
import React, {Component} from 'react';
export default class Hello extends Component {
render() {
return (
<div>
Hello,React!
</div>
)
}
}
然后再执行一遍打包命令 webpack --config webpack.dev.config.js
按照React语法，写一个Hello组件
import React,{Component} from 'react';
import ReactDom from 'react-dom';
export default class Hello extends Component{
render(){
return(
<div>
Hello,React!!!!!!!!!!!
</div>
)
}
}
ReactDom.render(<Hello/>, document.getElementById('app'));
命令优化
每次打包都得在根目录执行这么一长串的命令，直接修改package.json里面的script，增加dev-build
react-router
npm install --save react-router-dom
然后在src文件夹下新建两个组件 Home和Page 写入最基本的内容，让其有内容可以显示在页面
image.png
在
router.js引入这两个组件
import React from 'react';
import {
BrowserRouter as
Router,
Route,
Switch,
Link
} from 'react-router-dom';
import Home from '../pages/Home';
import Page from '../pages/Page';
const router=()=>(
<Router>
<div>
<ul>
<li><Link to='/'>首页</Link></li>
<li><Link to='/page'>首页</Link></li>
</ul>
<Switch>
<Route exact path="/" component={Home}/>
<Route path="/page" component={Page}/>
</Switch>
</div>
</Router>
);
export default router;
然后在src/index.js中
import React,{Component} from 'react';
import ReactDom from 'react-dom';
import router from './router/router'
ReactDom.render(router(), document.getElementById('app'));
在原网站中会出现点击首页和page没有反应，但是我在使用webstorm的情况下没有遇见，暂时自己还不知道是什么问题。只能跳过！！！！
可能在打包的时候遇到这个问题
image.png
直接运行 webpack-cli即可
webpack-dev-server
简单来说，webpack-dev-server就是一个小型的静态文件服务器。使用它，可以为webpack打包生成的资源文件提供Web服务。
npm install webpack-dev-server@2 --save-dev
补充：这里
webpack-dev-server需要全局安装，要不后面用的时候要写相对路径。需要再执行这个npm install webpack-dev-server@2 -g
修改webpack.dev.config.js，增加webpack-dev-server的配置
devServer: {
contentBase: path.join(__dirname, './dist')
}
现在执行webpack-dev-server --config webpack.dev.config.js
在这里不知道为什么又遇到了一个未知的困难
image.png
自行在网上百度 看到了有人说有可能是因为webpack和webpack-dev-server的版本不兼容的问题然后我拷贝了之后项目中
webpack和webpack-dev-server的版本就可以了
"webpack": "^3.10.0",
"webpack-dev-server": "^2.9.7"
直接打开浏览器访问localhost:8080即可
Q: --content-base是什么？
A：URL的根目录。如果不设定的话，默认指向项目根目录。
到这里我们也可以在package.json里面设定，直接跑npm start就可以了，不用每次都写webpack-dev-server --config webpack.dev.config.js
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"dev-build": "webpack --config webpack.dev.config.js",
"start": "webpack-dev-server --config webpack.dev.config.js"
}
然后还有其他的webpack-dev-server的配置项
1.color（CLI only） console中打印彩色日志
2.historyApiFallback 任意的404响应都被替代为index.html。有什么用呢？你现在运行npm start，然后打开浏览器，访问http://localhost:8080,然后点击Page1到链接http://localhost:8080/page1，然后刷新页面试试。是不是发现刷新后404了。为什么？dist文件夹里面并没有page1.html,当然会404了，所以我们需要配置
historyApiFallback，让所有的404定位到index.html。
3.host 指定一个host,默认是localhost。如果你希望服务器外部可以访问，指定如下：host: "0.0.0.0"。比如你用手机通过IP访问。hot 启用Webpack的模块热替换特性。关于热模块替换，我下一小节专门讲解一下。
4.port 配置要监听的端口。默认就是我们现在使用的8080端口。
5.proxy 代理。比如在 localhost:3000 上有后端服务的话，你可以这样启用代理：
proxy: {
"/api": "http://localhost:3000"
}
模块热替换（Hot Module Replacement）
只更新改变的那一块，并且整个页面处于不刷新的状态
在package.json的start写入"start": "webpack-dev-server --config webpack.dev.config.js --hot" 尾部追加一个--hot
然后在src/index.js写入
if (module.hot) {
module.hot.accept();
}
网友评论