请参考右边网页的Installation和Getting Started篇：https://webpack.js.org/guides/

安装webpack

先使用git bash进入一个你想安装的位置，然后请在git bash里输入如下命令，该命令将下载最新版本的webpack。

cd //这里填写你想安装的位置
npm install --save-dev webpack

webpack安装成功及文件夹中新增文件如下二图：
webpack安装成功_新增文件
webpack安装成功

新建信息文件package.json

webpack安装成功后，如果想在目录下新建一个webpack相关的信息文件，请使用下面命令：

npm init -y

信息文件package.json新建成功及文件夹中新增文件如下二图：
信息文件package.json_新增文件
信息文件package.json新建成功

加载Lodash

方法1

首先，修改文件夹结构，添加下图中没有的文件夹和文件：
需添加的文件

  • node_modules、package-lock.json是下载webpack产生的文件

  • package.json是webpack相关的信息文件，现在需要修改私密性

    +   "private": true,        //前面加号表示请 添加 这行
-   "main": "index.js",     //前面减号表示请 删除 这行

  • 添加index.html

    <!doctype html>
<html>
<head>
    <title>Getting Started</title>
    <script src="https://unpkg.com/lodash@4.16.6"></script>
</head>
<body>
    <script src="./src/index.js"></script>
</body>
</html>

  • 添加./src/index.js

    function component() {
    let element = document.createElement('div');

    // Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello', 'webpack'], ' ');

    return element;
}

document.body.appendChild(component());

完成添加、修改，运行index.html，看到如下结果，说明正确：
安装设置成功结果

方法2

修改文件夹结构，将index.html移入文件夹dist中：
文件结构_2

在webpack安装目录下，使用如下命令安装lodash

cd //这里填写webpack安装目录
npm install --save lodash

安装成功后，会在node_modules里添加新文件夹lodash、lodash.debounce：
npm安装lodash
npm安装lodash_2

  • 修改./src/index.js

    import _ from 'lodash'    //?新添加的语句

function component() {
    let element = document.createElement('div');

    //Lodash, currently included via a script, is required for this line to work
    element.innerHTML = _.join(['Hello','webpack'],' ');

    return element;
}

document.body.appendChild(component());

  • 修改./dist/index.html

    <!doctype html>
<html>
<head>
    <title>Getting Started</title>
    <!-- <script src="https://unpkg.com/lodash@4.16.6"></script> -->    //?删除
</head>
<body>
    <!-- <script src="./src/index.js"></script> -->        //?删除
    <script src="main.js"></script>         //?添加
</body>
</html>

完成修改后，还需运行下述命令，确定以./src/index.js为入口（entry point），输出./dist/main.js（output）：

npx webpack

输入上述命令后，会提示安装webpack-cli，安装就是了，成功及文件夹dist新增文件如下图：
npx_webpack_2
npx_webpack

完成上述修改，运行index.html，看到如下结果，说明正确：
npm_lodash_成功

注意！！至此，在chrome、edge中都行正常显示，firefox中还需在index.html的<head>里添加<meta charset="utf-8">才能看到正确结果

新建配置文件webpack.config.js

webpack官方教程里说，如果你是用的是version 4，那其实你是不需要配置文件的，但是很多项目很复杂，可能会用到很多配置，所以还是新建一个配置文件吧。

As of version 4, webpack doesn't require any configuration, but most projects will need a more complex setup, which is why webpack supports a configuration file.

首先，请自行创建配置文件./webpack.config.js，(ﾉ*･ω･)ﾉ，指示图标也变得不一样了：
文件结构_3

  • 添加webpack.config.js内容，配置文件基本格式：

    const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    }
};

  • git bash里操作，将默认配置文件替换为这个配置文件，且成功如下图：

    npx webpack --config webpack.config.js

    webpack.config.js设置成功

便民优化

修改./dist/main.js更新命令

请参考：https://webpack.js.org/guides...

至此，webpack基本操作已经完成。
当你修改./src/index.js、./dist/index.html等会改变页面显示的时候，都需要在git bash中输入命令npx webpack进行更新（导出新的./dist/main.js），如果你不喜欢这个命令，你可以自行设置命令。

  • 如果你需要修改更新命令，请修改信息文件./package.json：

    {
  "name": "react-todolist",
  "version": "1.0.0",
  "description": "",
  "private": true,
  "dependencies": {
      "lodash": "^4.17.11",
      "webpack": "^4.20.2"
  },
  "devDependencies": {
      "webpack-cli": "^3.1.2"
  },
  "scripts": {
      "test": "echo \"Error: no test specified\" && exit 1",
      "build": "webpack"        //?新添内容
  },
  "keywords": [],
  "author": "",
  "license": "ISC"
}

  • 完成上述添加后，你就可以在git bash中使用如下命令对./dist/main.js进行更新：

    npm run build
  • 成功！！
    修改main.js更新命令

开启watch模式，舍弃次次npm run build、npx webpack

请参考：https://webpack.js.org/guides...

watch模式会自动监听你这个文件夹里所有的文件，当你修改一些文件需要更新页面，不再需要在git bash里反复输入npm run build、npx webpack或者你自定义的更新命令，只需要刷新页面就可以查看更新的结果。

  • 如果你需要开启watch模式，请在信息文件package.json里添加如下?代码：

    {
    "name": "react-todolist",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "dependencies": {
        "lodash": "^4.17.11"
    },
    "devDependencies": {
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch"        //?新添加的代码，开启`watch`模式
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}
  • 想要退出watch模式，只需在git bash里按下快捷键ctrl + c，如果你没改过快捷键的话ㄟ( ▔, ▔ )ㄏ

使用webpack-dev-server

请参考：https://webpack.js.org/guides...

watch模式让你少写一种git bash命令，webpack-dev-pack让你都不再需要写git bash命令就能更新浏览器。

  • 想要启动webpack-dev-server模式，首先需要使用git bash进行安装：

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

  • 其次，你需要更改配置文件webpack.config.js：

    const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        filename: 'main.js',
        path: path.resolve(__dirname, 'dist')
    },
    mode: 'development',
    devServer: {                    //?新增
        contentBase: './dist'       //?新增
    },                              //?新增
};

  • 配置完成后，需要在信息package.json中插入以下?代码：

    {
    "name": "react-todolist",
    "version": "1.0.0",
    "description": "",
    "private": true,
    "dependencies": {
        "lodash": "^4.17.11"
    },
    "devDependencies": {
        "webpack": "^4.20.2",
        "webpack-cli": "^3.1.2",
        "webpack-dev-server": "^3.1.9"
    },
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "watch": "webpack --watch",
        "start": "webpack-dev-server --open"    //?新增
    },
    "keywords": [],
    "author": "",
    "license": "ISC"
}

  • 最后，使用如下git bash命令启动，并在你想使用的浏览器中输入网址localhost/8080：

    npm run start
  • 想要退出webpack-dev-server模式，只需在git bash里按下快捷键ctrl + c，如果你没改过快捷键的话ㄟ( ▔, ▔ )ㄏ

总结

步骤：

  • 安装webpack
  • 新建信息文件package.json
  • 加载lodash
  • 新建配置文件webpack.config.js
  • （可选）修改./dist/main.js更新命令
  • （可选）使用watch、webpack-dev-server模式

文件夹结构：

  • index.html：你的主页面
  • main.js：打包好的javascript文件
  • node_modules：安装webpack的文件夹
  • index.js：你的原始javascript文件
  • package-lock.json：安装webpack的文件（使用npm 5才有，没有没有问题）
  • package.json：信息文件
  • webpack.config.js：配置文件

文件夹结构_3

# webpack # git # json
Logo
AtomGit 开源协作平台测评赛

瓜分20万奖金 获得内推名额 丰厚实物奖励 易参与易上手

更多推荐

柔性电子 热电效应: 塞贝克(seebeck )效应 帕尔贴(Peltier)效应和 汤姆逊(Thomson )效应

本文主要讲述热电效应的三个基本原理：1 塞贝克效应 seebeck effect2 帕尔贴效应 Peltier effect3 汤姆逊效应 Thomson effectZT (thermoelectric figure of merit) 热电优值1.1 塞贝克效应在热电材料中，由自由电子或空穴携带电荷和热量。热电半导体材料中的电子和空穴表现的像带电粒子的气体，如果一个正常的（不带...

avatar 开放原子开发者工作坊

液晶屏 LCD12864 / LCD12232 串行 / 并行接口驱动

液晶屏 LCD12864 / LCD12232 串行 / 并行接口驱动一、LCD12864 / LCD122321、LCD128642、LCD122323、接线图二、ST79201、接口时序①、并口时序图②、串口时序图2、用户指令集①、基本指令集（RE = 0）②、扩展指令集（RE = 1）③、具体指令介绍1、清除显示2、位址归位3、位址归位4、显示状态开 / 关5、游标或显示移位控制6、功能设定

avatar 开放原子开发者工作坊

simulink仿真电力系统控制时，积分模块（Intergrator）和传递函数模块（Transfer FCN）的用法以及其等效条件

积分模块（Intergrator）、传递函数模块（Transfer FCN）在仿真模拟的模块选择时，特别是在初值对于结果影响较大的情况下，应该选用积分模块。若对初值无要求，或影响较小，或满足上述讨论条件时，再使用传递函数模块。

avatar 开放原子开发者工作坊