最近在用 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