webpack

请参考右边网页的InstallationGetting Started篇:https://webpack.js.org/guides/

安装webpack

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

cd //这里填写你想安装的位置
npm install --save-dev webpack

webpack安装成功及文件夹中新增文件如下二图:
webpack
webpack

新建信息文件package.json

webpack安装成功后,如果想在目录下新建一个webpack相关的信息文件,请使用下面命令:

npm init -y

信息文件package.json新建成功及文件夹中新增文件如下二图:
webpack
webpack

加载Lodash

方法1

首先,修改文件夹结构,添加下图中没有的文件夹和文件:
webpack

  • node_modulespackage-lock.json是下载webpack产生的文件
  • package.jsonwebpack相关的信息文件,现在需要修改私密性

    +   "private": true,        //前面加号表示请 添加 这行
    -   "main": "index.js",     //前面减号表示请 删除 这行
  • 添加index.html

    <!doctype html>
    <html>
    <head>
        <title>Getting Started</title>
        <script src="https://unpkg.com/[email protected]"></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,看到如下结果,说明正确:
webpack

方法2

修改文件夹结构,将index.html移入文件夹dist中:
webpack

webpack安装目录下,使用如下命令安装lodash

cd //这里填写webpack安装目录
npm install --save lodash

安装成功后,会在node_modules里添加新文件夹lodashlodash.debounce
webpack
webpack

  • 修改./src/index.js

    import _ from 'lodash'    // 

相关推荐