webpack学习之路（一）

注：本篇写于2018-12，基于webpack4.28.2 

学习之中的教程、例子来源于慕课网，仅以此记录学到的知识点，以防遗忘。好了，进入正题！

webpack 是一个现代 JS 应用程序的 静态模块打包工具

一、webpack的安装和命令行

1、进入C:\Users\Administrator目录下，新建webpacki-demo文件夹（名字随意），打开shell，输入npm init，初始化：

npm init

　　回车，一路回车。。。你会看到如下图，此时项目webpacki-demo下面，也出现package.json

2、安装webpack  npm install webpack  --save-dev  -g  ，开始安装

webpack npm install webpack --save-dev -g

接着安装webpack-cli执行：npm install  --save-dev  webpack-cli  -g  

npm install --save-dev webpack-cli -g  

 

3、我自己手动在package.json中，增加了：

"dev":"webpack --mode development --watch --progress --display-modules --colors --display-reasons"，这样在打包的过程中，在shell中可以看到打包的过程、细节，如下图：

然后，在项目根目录，新建 wbepack.config.js文件，输入：

module.exports = {
    mode: 'development',
    entry: {//入口，对应多个入口文件，多页面应用程序
        a: './src/script/a.js',
        main: './src/script/main.js'
    },
    output: {//输出
        path: __dirname + '/dist',    //__dirname 是项目根目录路径
        filename: 'js/[name]-[hash].js', //filename 用于输出文件的文件名。
    }
}

此时在shell中，输入 npm run dev，执行打包：

正确打包，看下图，此时的项目：（内有红色自己标注的内容）

 

 

 解释：根目录下 dist文件夹以及其下所有内容就是打包后，根据配置自动生成的。

吐槽：图片都是av画质，抱歉啊。。。