最近在用 webpack 搭建项目基础框架，以下就是搭建步骤：
注意：本次搭建是基于Node.js的，想要安装Node.js的小伙伴可以参考这里
安装webpack
生成
package.json文件
npm init -y生成
.gitignore文件
gi node,ubuntu,WebStoem >> .gitignore
gi是自动生成.gitignore的工具，可以自己手动书写.gitignore文件，想要安装gi的小伙伴可以点击这里安装下载webpack并添加依赖
npm install webpack --save-dev-
检验是否安装成功
- 添加
entry.js文件
document.write("It works.");
- 添加
index.html文件
<html> <head> <meta charset="utf-8"> </head> <body> <script type="text/javascript" src="bundle.js" charset="utf-8"></script> </body> - 添加
</html>
> - 运行命令:
`webpack ./entry.js bundle.js`
>运行`index.html`，出现下面页面则说明安装成功。
- 下载样式加载器
npm install css-loader --save
npm install style-loader --save
- 添加`style.css`
body {
background: pink;
}
- 修改`entry.js`文件
require("./style.css");
document.write("It works.");
- 添加`webpack.config.js`文件
module.exports = {
entry: "./entry.js",
output: {
path: __dirname,
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style-loader!css-loader" }
]
}
};
- 运行`webpack`,如果页面样式正常显示，则证明安装成功。
- 为`package.json`添加以下语句
"scripts": {
"webpack":"webpack -d --watch"
}
- 运行`npm run webpack`,这样webpack可以对文件自动打包。
###搭建服务器（express）
- 本地下载安装express
`npm install express --save`
- 添加`server.js`文件
var express = require('express');
var app = express();
app.get('/', function(req, res){
res.send('hello world');
});
app.listen(3000, function () {
console.log('Example app listening at port 3000：');
})
- 运行`npm start`，访问`localhost:3000`,页面上显示`hello world`,则说明服务器搭建成功。
- 修改`package.json`文件
scripts": {
"start":"nodemon server.js"
}
- 运行`npm start`，服务器就可以自启动。
- 修改`server.js`文件
var express = require('express');
var app = express();
app.use(express.static('./'));
app.listen(3000, function () {
console.log('Example app listening at port 3000：');
})
- 执行下列命令：
npm run webpack
npm start
访问`localhost:3000`,若页面上正常显示，则说明搭建成功。
###安装其他依赖
- 安装`eslint`
npm install -g eslint
eslint --init
eslint yourfile.js
- 安装babel
npm install babel-loader --save
npm install babel-core --save
npm install babel-preset-es2015 --save
npm install babel-preset-react
- 添加`.babelrc`文件
{
"presets": [
"es2015",
"react"
]
}
- 下载`file-loader`和`url-loader`
npm install file-loader --save
npm install url-loader --save
- 修改`webpack.config.js`文件
module: {
loaders: [
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.(jpe?g|png|gif|svg)$/i,
loaders: [
'url?limit=10000&name=img/[hash:8].[name].[ext]', // 图片小于8k就转化为 base64, 或者单独作为文件
'image-webpack' // 图片压缩
]
},
{
test: /.(jpe?g|png|gif|svg)$/i,
loaders: ['file?hash=sha512&digest=hex&name=[hash].[ext]']// 生成 md5 hash 格式的文件名'image-webpack' // 图片压缩
}
]
}
- 下载`path`
`npm install path --save`
- 修改`webpack.config.js`文件
var path=require("path");
module.exports = {
entry: "./public/js/entry.js",
output: {
path: path.join(__dirname,"public/dist"),
filename: "bundle.js"
},
- 执行下列命令
npm install react --save
npm install react-dom --save
- 修改`webpack.config.json`文件
var path=require("path");
module.exports = {
entry: "./public/js/main.js",
output: {
path: path.join(__dirname,"public/dist"),
filename: "bundle.js"
},
module: {
loaders: [
{ test: /.css$/, loader: "style-loader!css-loader" },
{
test: /.(jpe?g|png|gif|svg)$/i,
loaders: [
'url?limit=10000&name=img/[hash:8].[name].[ext]', // 图片小于8k就转化为 base64, 或者单独作为文件
'image-webpack' // 图片压缩
]
},
{
test: /.(jpe?g|png|gif|svg)$/i,
loaders: ['file?hash=sha512&digest=hex&name=[hash].[ext]']// 生成 md5 hash 格式的文件名'image-webpack' // 图片压缩
},
{
test: /.jsx?$/,
loader: 'babel-loader',
exclude: /node_modules/,
query: {
cacheDirectory: true,
presets: ['react', 'es2015']
}
}
]
}
};
- 修改`entry.js`文件
require("./../css/style.css");
import React, {Component} from 'react';
import {render} from "react-dom";
class HelloMessage extends React.Component {
render() {
return <div>Hello</div>;
}
}
render(<HelloMessage/>, document.getElementById('app'));
- 修改`index.html`文件
`<div id="app"></div>`
- 启动服务器和 webpack,访问`localhost:3000`,如果出现下列页面，则证明项目搭建成功。
项目目录结构如下：
源码[点这里](https://github.com/yhl221/build-webpack)
参考资料：
- webpack
https://github.com/chenbin92/react-redux-webpack-starter/issues/1
http://www.pro-react.com/materials/appendixA/
http://webpack.github.io/docs/tutorials/getting-started/
- 浅析 NodeJs 的几种文件路径
https://github.com/imsobear/blog/issues/48
- 配置文档自启动
https://www.zybuluo.com/yangfch3/note/249328#0-npm-run-npm-run-script
- eslint
http://eslint.org/docs/user-guide/getting-started