搞定webpack4.x 配置系列 （ 一 ）

1 首先我们要知道 webpack 官方文档：

中文地址：https://www.webpackjs.com
英文地址：https://webpack.js.org/

2 要清楚 webpack 是什么 ？

官方介绍说：
本质上，webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。
我给大家提取下关键词 ：
第一： 是针对于现代 JavaScript 应用程序的静态模块打包的。（ JavaScript ）
第二： 它会将这些模块 打包成一个 或者 多个 我们需要的 打包后的 JS 文件

3： 在开始前你需要先理解四个核心概念：

• 入口(entry)
• 输出(output)
• loader
• 插件(plugins)

这边文章我们先介绍前面两个【 入口(entry) ，输出(output) 】

接下来需要我们动手去敲命令及代码的：
1先安装 webpack ( 假设你已经安装了 node npm cnpm 了 )

cnpm install webpack webpack-cli -g       // 全局安装 webpack4.x

接下来 我们可以建一个空文件夹 （ app ）

cd app         //  终端进入我们的文件夹

npm init      //  初始化项目  这里可以一路回车  

这里我们就生成了一个 package.json 文件

cnpm install webpack webpack-cli -S     // 生成依赖文件（ node_modules 文件夹）

webpack4 打包相比之前的版本 有个变化 ，它有个默认的入口 ，
在app里新建一个文件 src/index.js 。这点很重要 这是规定 ！
我们可以在 index.js 里面打印下

console.log("我今天学习了webpack4");

这样的话 我们就可以打包了 ， webpack4 打包也很简单 。

webpack     //  直接输入webpack 回去就可以了 ，执行打包了 ！ 

这里我们就可以看到文件了 多个 dist/main.js文件了 ， 这就是 webpack的默认出口 ！
当然我们可以修改这些配置 ： 根目录新建 （webpack.config.js）

//  path 它是一个 Node.js 核心模块，用于操作文件路径。
const path = require('path');      

module.exports = {
    entry: './src/index.js',                     //  这里是我们入口文件配置
    output: {                                      //  这里是出口文件配置  
        path: path.resolve(__dirname, 'dist'),     
        filename: 'main.js'
      }
  };

这里我在说个 项目启动及打包命令配置

webpack --mode production       //  打包成 - 生产环境
webpack --mode development    // 打包成 - 开发环境

当然这里我们不需要每次都去执行这么长的命令，我们可以在 webpack.json 里面配置 ：

"scripts": {
    "start":"webpack --mode development",
    "dev": "webpack-dev-server --open --inline"
  },

这里我们需要一个 安装服务端环境

cnpm install webpack-dev-server -S   

然后需要在 webpack.config.js 里面添加配置

const path = require('path');

module.exports = {
    entry: './src/index.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: 'bundle.js'
      },
      devServer:{
          contentBase: "./dist",   //   指定的目录
          inline: true             // 修改会自动更新
      }
  };

到这里我们就可以 启动 npm run dev 了 ，需改 index.js 文件 打包后的文件也更新了 ！

未完成 … 待续