从安装 Node.js 到使用 webpack 管理（二）

一：新建webpack.config.js文件

在之前的目录基础上，新建一个新的文件：webpack.config.js文件。

每次文件的内容发生改变的时候，都要执行一段终端命令来更新文件。如果文件结构复杂，那么这条指令会非常负责。因此，需要是要到wenpack.config.js来告诉webpack，需要打包哪个文件，并将文件生成在哪里。

在webpack.config.js文件中输入内容：

module.exports = {
    entry: './src/main.js',
    output: {
        path: 'E://前端//webpack学习//01-webpack的使用//02-webpack文件的配置//dist',
        filename: 'bundle.js'
    }
}

它将告诉webpack ，将src目录下的main.js文件进行打包。打包到dist目录下，并且生成一个名为bundle.js的文件。

直接在终端运行webpack命令，就可以在dist目录下生成一个bundle.js文件。

此时，path需要存放一个绝对路径，如果这个配置文件需要复用，则每次使用的时候都要手动更改，因此可以采用其他方式来告诉webpack需要存放文件的位置。

二：使用npm init

在终端中运行命令npm init，这将初始化一些项目信息。此时终端会进入一个输入状态，让你输入关于这个项目的一些基本信息。

设置package name为meetwebpack，并将version设置为1.0.0，主要的main入口设置，作者以及注释等其余的可以空格跳过。最后会有一个让你确认所输入的信息 。并且输入yes

 此时,会在目录中生成一个package.json文件，里面存储了刚设置的一些信息。

 在初始化完成之后，就可以在终端运行命令npm install来安装所有需要的文件。随后更改webpack.config.js文件，现在我们可以声明并使用一个变量path，里面存储了当前项目所在的路径。

const path = require('path')

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

拥有了项目所在的路径后，通过这个变量path的resolve方法，拼接两个字符创组成一个绝对路径。__dirname是npm中存在的变量，存储项目的路径，dist为目录文件夹。

此时，不管这个项目被复制到哪里，执行webpack的时候都会在项目所在的目录的dist文件夹中打包生成文件。有些时候，webpack.config.js文件可能不是按规定命名，可能为其他名称。这时候不能使用webpack来打包生成文件，需要更复杂的命令。如果能让npm来代理执行命令并且不用在乎是否webpack.config.js文件是否存在。

通过修改package.json文件来实现。

{
    "name": "meetwebpack",
    "version": "1.0.0",
    "description": "My first webpack",
    "main": "index.js",
    "scripts": {
        "test": "echo \"Error: no test specified\" && exit 1",
        "build": "webpack"
    },
    "author": "hrc",
    "license": "ISC"
}

我们可以运行npm run test命令，来执行test所对应的语句命令。模仿这种命令方式，我们可以通过声明一个“build”来告诉npm，执行build的时候，实际执行的命令是webpack。这样不管后续的命令多复杂，通过npm来执行一个特定的名字，就可以达到执行一长串命令的效果。

此时的npm run build等同于运行webpack命令