以前尝试过几个教程的搭建方法但是最后都失败了，最后在豆青学姐的简书教程和李婷婷学姐的帮忙下解决了这个问题，下面简单记录一下。
1.创建项目文件夹webpack-hello-demo
npm init 初始化文件夹产生package.json文件
2.安装webpack
-
npm install webpack --save-dev 安装webpack依赖 -
创建index.html文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>test</title>
</head>
<body>
<script type="text/javascript" src="bundle.js" charset="utf-8"></script>
</body>
</html>
-
创建入口文件entry.js（touch entry.js）
document.write("hello") -
创建bundle.js文件 内容为空
三个文件都创建之后运行命令webpack ./entry.js bundle.js会看到bundle.js中生成了很多代码，这就是webpack打包之后的结果。
3.配置webpack
创建配置文件webpack.config.js
module.exports = {
entry: "./entry.js", // 要打包的入口文件
output: { //打包后的文件
path: __dirname, //表示使用绝对路径
filename: "bundle.js" //输出文件名
},
module: {
loaders: [ //用于加载一些静态文件夹（css样式，图片之类）
{ test: /\.css$/, loader: "style-loader!css-loader" },
//加载css
{
test: /\.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/, //不进行转换的文件，可以提高打包速度
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
},
{
test: /\.(jpe?g|png|gif|svg)$/i,
loader: 'url-loader?limit=1000&name=images/[name].[ext]',//加载图片
}
]
}
};
配置文件创建完成后执行webpack 再运行index.html文件 出现hello说明配置成功
4.安装express
npm install express --save-dev
创建server.js
var express = require('express');
var app = express();
app.use(express.static('./')); //访问当前目录下的静态文件。默认访问index.html
app.listen(3000, function () {
console.log('Example app listening on port 3000!');
})
完成之后执行命令webpack 打包文件
执行node server.js开启服务器
浏览器访问 http://localhost:3000/ ， 页面显示hello，运行成功。
5.配置react es5 babel6
这里需要安装一些依赖，执行下面的命令
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"
]
}
6.使用react例子测试
entry.js:
import React, {Component} from 'react';
import {render} from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hello World</div>;
}
}
render(<HelloMessage />, document.getElementById('app'));
index.html:
<!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>
完成之后执行命令webpack 打包文件
执行node server.js开启服务器
浏览器访问 http://localhost:3000/ ， 页面显示hello，运行成功。
所有的文件都在根目录下：
文件结构
这样就搭建好啦
网友评论