webpack

请参考右边网页的Installation和Getting Started篇：https://webpack.js.org/guides/安装webpack先使用git bash进入一个你想安装的位置，然后请在git bash里输入如下命令，该命令将下载最新版本的webpack。cd //这里填写你想安装的位置npm install...

weixin_33721344

113人浏览 · 2018-10-17 04:23:43

weixin_33721344 · 2018-10-17 04:23:43 发布

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

安装webpack

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

cd //这里填写你想安装的位置
npm install --save-dev 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

完成上述修改，运行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
```

便民优化

修改`./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
```
成功！！

开启`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"
}