Linux下用webpack搭建项目框架

作者: 杨慧莉 | 来源:发表于2017-03-21 13:06 被阅读0次

Linux下用webpack搭建项目框架
webpack4搭建vue项目
webpack4 搭建项目框架
使用MuseUI创建你的第一个单页面应用
给你的MuseUI应用添加字体、样式
搭建项目环境
使用vue+webpack搭建vue项目
前端技术月报201906期
MuseUI-UI的使用
Electron Preload 预加载

最近在用 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`，出现下面页面则说明安装成功。


![index.png](https://img.haomeiwen.com/i3126454/626c061ef674d023.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)

- 下载样式加载器

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`,如果出现下列页面，则证明项目搭建成功。

![index.png](https://img.haomeiwen.com/i3126454/b4b57dcbaba3438a.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
项目目录结构如下：
![directory.png](https://img.haomeiwen.com/i3126454/ae1d7a456ef836ed.png?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
源码[点这里](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