1.新建并进入文件夹demo

    1. mkdir demo
    2. cd demo

    2.本地安装webpack和webpack-cli

    1. npm install webpack webpack-cli --save-dev

    -save简写-S，—save-dev简写为-D

    3.初始化项目结构

    1. + ├─package.json
    3. + ├─dist // 存放最终打包的文件
    5. + │ └─index.html
    7. + ├─src // 存放入口文件等开发文件
    9. + │ └─index.js
    11. + ├─webpack.config.js // webpack的配置文件

    4.安装lodash：

    1. npm install lodash -D

    5.编写index.js

    1. import _ from 'lodash';
    3. function createElement() {
    4.     let div = document.createElement('div');
    5.     div.innerHTML = _.join(['my','name','is', 'jie'])
    6.     return div;
    7. }
    9. document.body.appendChild(createElement())

    6.编写webpack.config.js

    1. const path = require('path');
    3. module.exports = {
    4.     entry: './src/index.js',
    5.     mode: 'development',
    6.     output: {
    7.         filename: 'main.js',
    8.         path: path.resolve(__dirname, 'dist')
    9.     }
    10. }

    7.打包测试，运行npx webpack

    1. npx webpack
    3. // 输出：
    5. Hash: 030b37b6b9a0b4344437
    7. Version: webpack 4.39.1Time: 308ms
    9. Built at: 2019-08-07 08:10:21
    11. Asset Size Chunks Chunk Names
    13. main.js 552 KiB main [emitted] main
    15. Entrypoint main = main.js
    17. [./node_modules/webpack/buildin/global.js]  (webpack)/buildin/global.js 472 bytes {main} [built]
    19. [./node_modules/webpack/buildin/module.js]  (webpack)/buildin/module.js 497 bytes {main} [built][./src/index.js] 225 bytes {main} [built]
    21. + 1 hidden module

    打包后文件会生成在dist文件夹中。
    8.index.html引入mai.js

    1. <script src="./main.js"></script>