npm public start_Webpack掉坑之路（1）——HelloWorld（基于npm,react）

前言：

基于ES6风格的React以及较新版本的webpack(4.x)和babel等，旨在搬砖和整理，为初学者和自己提供参考，可能存在许多不足之处，请多指教。

1. 初始化：

首先创建文件夹webpack_demo，然后执行命令npm init，进行初始化：

> npm init

2. 创建工程目录：

目录内包括app，config以及public，分别用于存放源代码文件、配置文件以及输出文件。创建目录结构如下：(在cmd控制台下，执行tree命令)

D:\webpack_demo> tree .

卷 software 的文件夹 PATH 列表

卷序列号为 8CFF-7734

D:\WEBPACK_DEMO

├─app

├─config

└─public

3. 创建HTML首页

在public目录下，创建一个index.html，作为主页，将存放app目录下的打包输出文件bundle.js，代码如下：

Document

4. 编写入口文件main.js

在app目录下，创建一个main.js，暂时作为主要入口(entry)，该文件将被打包为bundle.js，输出到public目录下，代码如下：

import React,{Component} from 'react';

import ReactDOM from 'react-dom';

class App extends Component{

render(){

return (

Hello, world!

);

}

}

ReactDOM.render(

,

document.getElementById('root')

)

此时，需要安装一下react和react-dom包，命令如下：

> npm install --save react react-dom

5. webpack配置(config/webpack.config.js)

webpack配置好后，即可用webpack命令打包app中的源码，首先需要安装webpack相关依赖包，命令如下：

> npm install --save-dev webpack webpack-cli

然后在config目录下创建一个配置文件webpack.config.js，内容如下：

const path = require('path');

const base = path.join(__dirname, '..');

module.exports={

devtool: 'eval-source-map',

entry: path.resolve(base,'app/main.js'),

output:{

path: path.resolve(base, 'public'),

filename: 'bundle.js'

},

devServer:{

contentBase: path.resolve(base, 'public'),

historyApiFallback: true,

inline: true, //实时更新

},

module: {

rules: [

{

test: /\.js$/,

exclude: /(node_modules|bower_components)/,

use: {

loader: 'babel-loader',

options: {

presets: ["@babel/preset-env","@babel/preset-react"],

plugins: [require('@babel/plugin-proposal-object-rest-spread')]

}

}

}

]

}

};

由于此处用到了babel，而且main.js以es2016的编码方式，需要用babel来进行转换，以兼容之前版本的es，依赖包安装命令如下：(https://www.npmjs.com/package/babel-loader)

> npm install -D babel-loader @babel/core @babel/preset-env @babel/preset-react

6. 添加启动脚本命令行

在package.json中，向"scripts"项添加执行webpack打包命令：

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "webpack --config config/webpack.config.js"

},

配置完毕后，执行命令npm start，可以进行打包，打包后我们能够看到public目录下多出了一个bundle.js的文件，说明打包成功。内容大概如下所示：

>npm start

> webpack_demo@1.0.0 start D:\webpack_demo

> webpack --config config/webpack.config.js

Hash: e5644b2f4476f963bdc1

Version: webpack 4.20.2

Time: 934ms

Built at: 2018-09-26 23:19:52

Asset Size Chunks Chunk Names

bundle.js 1.87 MiB main [emitted] main

Entrypoint main = bundle.js

[./app/main.js] 2.66 KiB {main} [built]

+ 11 hidden modules

7. 实现页面实时更新

为了能够在编码的同时实时更新前端页面，我们需要安装webpack-dev-server

webpack-dev-server的依赖包安装命令如下：

> npm install --save-dev webpack-dev-server

然后在package.json文件对应的"scripts"中，添加一行执行脚本命令：

...

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "webpack --config config/webpack.config.js",

"server": "webpack-dev-server --open --config config/webpack.config.js"

},

...

8. 启动服务器

执行命令npm run server，具体的服务器配置信息如上面的webpack.config.js中的"devServer"。 执行结果如下：

D:\webpack_demo>npm run server

> webpack_demo@1.0.0 server D:\VictorLin\workspace\webpack_demo

> webpack-dev-server --open --config config/webpack.config.js

i ｢wds｣: Project is running at http://localhost:8080/

i ｢wds｣: webpack output is served from /

i ｢wds｣: Content not from webpack is served from D:\webpack_demo\public

i ｢wds｣: 404s will fallback to /index.html

i ｢wdm｣: wait until bundle finished: /

i ｢wdm｣: Hash: e734530a0f196c5a077c

Version: webpack 4.20.2

Time: 1218ms

Built at: 2018-09-26 23:31:14

Asset Size Chunks Chunk Names

bundle.js 2.69 MiB main [emitted] main

Entrypoint main = bundle.js

[./app/main.js] 2.66 KiB {main} [built]

[./node_modules/html-entities/index.js] 231 bytes {main} [built]

[./node_modules/loglevel/lib/loglevel.js] 7.68 KiB {main} [built]

[./node_modules/node-libs-browser/node_modules/punycode/punycode.js] 14.3 KiB {main} [built]

[./node_modules/querystring-es3/index.js] 127 bytes {main} [built]

[./node_modules/react-dom/index.js] 1.33 KiB {main} [built]

[./node_modules/react/index.js] 190 bytes {main} [built]

[./node_modules/url/url.js] 22.8 KiB {main} [built]

[./node_modules/webpack-dev-server/client/index.js?http://localhost:8080] (webpack)-dev-server/client?http://localhost:8080 7.78 KiB {main} [built]

[./node_modules/webpack-dev-server/client/overlay.js] (webpack)-dev-server/client/overlay.js 3.58 KiB {main} [built]

[./node_modules/webpack-dev-server/client/socket.js] (webpack)-dev-server/client/socket.js 1.05 KiB {main} [built]

[./node_modules/webpack-dev-server/node_modules/strip-ansi/index.js] (webpack)-dev-server/node_modules/strip-ansi/index.js 161 bytes {main} [built]

[0] multi (webpack)-dev-server/client?http://localhost:8080 ./app/main.js 40 bytes {main} [built]

[./node_modules/webpack/hot sync ^\.\/log$] (webpack)/hot sync nonrecursive ^\.\/log$ 170 bytes {main} [built]

[./node_modules/webpack/hot/emitter.js] (webpack)/hot/emitter.js 77 bytes {main} [built]

+ 22 hidden modules

i ｢wdm｣: Compiled successfully.

如果执行成功的话，会自动弹出已经将打包好的public/bundle.js的public/index.html页面，并显示"Hello, world!"字眼，结果如图：

helloworld!.jpg

我们可以对app/main.js进行修改，比如添加几个感叹号：

//app/main.js

...

class App extends Component{

render(){

return (

Hello, world!!!!!!!

);

}

}

...

然后保存，会看到控制台会继续执行编译：

i ｢wdm｣: Compiling...

i ｢wdm｣: Hash: c771406eb303106ec693

Version: webpack 4.20.2

Time: 103ms

Built at: 2018-09-26 23:33:50

Asset Size Chunks Chunk Names

bundle.js 2.69 MiB main [emitted] main

Entrypoint main = bundle.js

[./app/main.js] 2.66 KiB {main} [built]

+ 36 hidden modules

i ｢wdm｣: Compiled successfully.

过程中包含了执行打包、index.html引用bundle.js，结果如图，确实是多了几个感叹号：

helloworld!!!!!!!.jpg

添加style/css loader支持

命令如下：

> npm install --save-dev style-loader css-loader

webpack.config.js配置如下

//其他配置...

module:{

rules:[

//其他配置... ,

{

test: /\.css$/,

use: [

{

loader: "style-loader",

},

{

loader: "css-loader",

}

]

}

]

}

如此便可以在app目录下创建一个css文件，然后让main.js中的组件引用，结果如图：

helloworld!!!!!!!_with_css.jpg

绑定本地IP

在devServer中添加一行host即可绑定本地IP，否则默认启动的服务器只绑定本地的localhost(127.0.0.1)，示例如下：

//其他配置项...

devServer: {

host: "192.168.4.24",

port: 3001,

//其他配置项...

},

结束语：

都是照搬大佬们的东西，并没有什么原创的，但也不至于抄袭文字，仅供自己和其他初学者学习，有不足之处，请多多指教。更详细教程请参考：

https://segmentfault.com/a/1190000006178770

附录：

1. package.json

package.json中的内容，包括本文中所使用到的各个依赖包及其版本：

//package.json

{

"name": "webpack_demo",

"version": "1.0.0",

"description": "",

"main": "index.js",

"scripts": {

"test": "echo \"Error: no test specified\" && exit 1",

"start": "webpack --config config/webpack.config.js",

"server": "webpack-dev-server --open --config config/webpack.config.js"

},

"author": "Victor",

"license": "ISC",

"dependencies": {

"react": "^16.5.2",

"react-dom": "^16.5.2"

},

"devDependencies": {

"@babel/core": "^7.1.0",

"@babel/preset-env": "^7.1.0",

"@babel/preset-react": "^7.0.0",

"babel-loader": "^8.0.2",

"webpack": "^4.20.2",

"webpack-cli": "^3.1.1",

"webpack-dev-server": "^3.1.9",

"css-loader": "^1.0.0",

"style-loader": "^0.23.0"

}

}

2. webpack.config.js

//config/webpack.config.js

const path = require('path');

const base = path.join(__dirname, '..');

module.exports={

devtool: 'eval-source-map',

entry: path.resolve(base,'app/main.js'),

output:{

path: path.resolve(base, 'public'),

filename: 'bundle.js'

},

devServer:{

contentBase: path.resolve(base, 'public'),

historyApiFallback: true,

//host: "192.168.4.24", //配置ip

//port: 3000, //配置端口

inline: true, //实时更新

},

module: {

rules: [

{

test: /\.js$/,

exclude: /(node_modules|bower_components)/,

use: {

loader: 'babel-loader',

options: {

presets: ["@babel/preset-env","@babel/preset-react"],

plugins: [require('@babel/plugin-proposal-object-rest-spread')]

}

}

},

{

test: /\.css$/,

use: [

{

loader: "style-loader",

},

{

loader: "css-loader",

}

]

}

]

}

};

初始项目的github如下地址，基于React和Antd，只需执行初始化命令(npm/yarn install)即可使用:

https://github.com/DeepbigSheng/ReactDemoBasedOnAntd