1.创建项目文件夹：
mdkir hello-world-demo
cd hello-world-demo
2.初始化文件夹
npm init -y //初始化一个package.json文件
git init //产生.git文件，便于之后版本提交回退
3.搭建webpack环境
npm i webpack -s //安装webpack依赖，安装完成后会有node_modules文件夹生成
接下来测试webpack是否安装成功：
在根目录下创建三个文件，分别为：entry.js,bundle.js,index.html
entry.js文件 //入口文件
document.write("hello world");
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>hello-world</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
bundle.js为空.
执行以下命令：
webpack ./entry.js bundle.js
然后发现bundle.js中有很多代码，这就是经过webpack打包后的文件．在浏览器打开index.html，效果和之前一样，则说明安装成功．
4.配置webpack
创建webpack.config.js文件内容如下：
module.exports = {
entry: "./entry.js", //入口文件，就是想要打包的文件入口
output: { //打包后的文件
path: __dirname,
filename: "bundle.js"
}
};
此时，运行webpack，打开index.html，效果与之前相同．
5.加入加载器
因为 webpack 只能处理javascript，当我们需要在项目中添加css 文件时就需要css-loader去处理 css 文件，还需要style-loader去应用样式在 css 文件中。
创建style.css文件内容如下：
body {
background: red;
}
修改entry.js文件：
require('./style.css'); //引入css文件
document.write('Hello');
修改 webpack.config.js 文件：
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{
test: /\.css$/, //表示所有的后缀为.css文件
loader: "style-loader!css-loader" //加入处理.css文件的loader(是需要安
装的)
}
]
}
};
其他的非js文件都需要相应加载器来处理。
运行webpack后，打开index.html文件，背景色为红色，说明配置成功。
此时的文件目录为：
文件目录.png
6.express下运行
安装express
npm install express --save
创建 server.js 文件内容如下：
const express = require('express');
const app = new express();
app.use(express.static(__dirname + '/'));
//提供项目根目录下的所有静态文件。默认访问index.html。
app.listen(3000, () => { //监听端口为3000
console.log('server start');
});
运行
webpack // 用于打包文件
node server.js // 开启服务器
打开浏览器查看localhost:3000，界面显示跟上一个配置显示一样说明成功。
7.babel 配置
babel 是支持 javascript 最新语法而不用等待浏览器的更新。
安装 babel
npm install react --save-dev
npm install react-dom --save-dev
npm install babel-loader --save-dev
npm install babel-core --save-dev
npm install babel-preset-es2015 --save
npm install --save-dev babel-preset-react
创建.babelrc文件内容如下：
{
"presets": [
"es2015",
"react"
]
}
新建 content.js 文件内容如下：
export default () => {
return "hello";
}
修改entry.js 文件：
require('./style.css');
import Hello from "./content";
document.write(Hello());
运行
webpack
node server.js
打开 localhost:3000 查看界面，如果跟上面的界面一样说明配置成功。
接下来就是写react小例子测试啦，修改entry.js：
import React, {Component} from 'react';
import {render} from "react-dom";
require('./style.css');
class HelloMessage extends React.Component {
render() {
return <div>Hello World</div>;
}
}
render(<HelloMessage />, document.getElementById('app'));
为了将组件渲染到页面，我们需要在index.html中添加一个相当于容器的div：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<div id="app"></div> // 添加的div，渲染至div中
<script type="text/javascript" src="bundle.js" charset="utf-8"></script></body>
</html>
至此为止，项目运行环境搭建完啦。
网友评论