今天大概讲一下从零开始搭建项目。
Webpack 配置
首先安装 webpack
npm install webpack --save-dev
webpack 基本配置
先创建 index.html 文件内容如下：
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>webpack</title>
<script src="bundle.js"></script>
</head>
<body>
</body>
</html>
创建 entry.js 文件内容如下：
document.write('Hello');
创建 webpack.config.js 文件内容如下：
module.exports = {
entry: "./entry.js", //入口文件，就是想要打包的文件入口
output: { //打包后的文件
path: __dirname,
filename: "bundle.js"
}
};
运行 webpack 后打开 index.html 文件，可以再页面上显示 Hello 说明配置成功。
这个只是最基本配置，如果要加入 CSS 样式，就需要一些加载器。
加入加载器
因为 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 文件，背景色为红色说明，配置成功。
express 配置
安装express
npm install express --save
创建 server.js 文件内容如下：
const express = require('express');
const app = new express();
app.use(express.static(__dirname + '/')); //提供项目根目录下的所有静态文件
app.listen(3000, () => { //监听端口为3000
console.log('server start');
});
运行 node server.js ，打开浏览器查看 localhost:3000 ，界面显示跟上一个配置显示一样说明成功。
babel 配置
babel 是支持 javascript 最新语法而不用等待浏览器的更新。
安装 babel
npm install babel-core babel-loader babel-preset-es2015 --save-dev
创建 .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 查看界面，如果跟上面的界面一样说明配置成功。
Eslint 配置
ESlint 是用来进行代码检查的。
安装 eslint：
npm install eslint --save-dev
在终端输入：
eslint --init
进行eslint的相应设置，会让你去选择，只要记住一些属性就行了，最后会生成 .eslintrc 文件。
运行 eslint entry.js 如果出现
代码检查
则需要进行代码规格改正。
这样就算是eslint配置成功。
配置文档自启动
修改 package.json 文件：
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "nodemon server.js",
"webpack": "webpack -d --watch"，
"eslint": "eslint entry.js"
}
这样就可以运行一下命令：
npm start //启动服务
npm run webpack //进行打包
npm run eslint //进行代码规范检查
这样所有的文件配置就好了。
网友评论