×

Webpack掉坑之路(1)——HelloWorld(基于npm,react)

96
DeepBig胜
2018.09.26 23:45* 字数 933

前言:

基于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,代码如下:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="root"></div>
    <script src="bundle.js"></script>
</body>
</html>

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 (
            <div>Hello, world!</div>
        );
    }
}

ReactDOM.render(
    <App/>,
    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 (
            <div>Hello, world!!!!!!!</div>
        );
    }
}
...

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

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

结束语:

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

日记本
Web note ad 1