webpack小白入门之基础概念【1-1】

环境搭建：安装Node.js 和 NPM

项目github地址

安装`nvm` [https://github.com/nvm-sh/nvm](https://github.com/nvm-sh/nvm)

    ps: nvm(Node.js Version Manager)也就是 Node.js 的包管理器，可以通过它方便安装和切换不同的Node.js版本。

Mac通过 curl 安装：`curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.34.0/install.sh | bash`

Windows的安装方法 参考[这里](https://www.jianshu.com/p/0d591ad6d60d)

检查node和NPM版本安装成功如下：

环境搭建：安装webpack和webpack-cli

创建空目录和package.json

- mkdir webpack.1-1

- cd webpack.1-1

- npm init -y

安装 webpack 和 webpack-cli

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

- 检查是否安装成功  webpack -v

在项目根目录下创建一个`webpack.config.js` 文件

    'use strict';

    const path = require('path');

    module.exports = {

      entry: './src/index.js',

      output: {

        path: path.join(__dirname, 'dist'),// 打包的文件夹名

        filename: 'bundle.js'    // 打包的文件名

      },

      mode: 'production'

    }

同时，在项目根目录下，创建src文件夹及其子文件`helloworld.js`和`index.js`

helloworld.js

    export function helloworld() {

      return 'hello webpack';

    }

index.js

    import { helloworld } from './helloworld';

    document.write(helloworld());

这样一个简单的demo就完成了，在工程命令行中执行命令 `webpack`开始打包工程。

打包好的结果是这样的：

由于我们打包出来的dist文件夹下面是没有html文件的，所以我们在dist文件夹下新建一个`index.html`文件，然后将bundle.js引进来。然后在浏览器中打开，一个简单的demo效果就出来了。

 总结一下：

    'use strict';                                     

    const path = require('path');                   

    module.exports = {                                   

      entry: './src/index.js',    // 用来指定webpack的打包入口                 

      output: {

        path: path.join(__dirname, 'dist'),

        filename: 'bundle.js'    // 打包的文件名

      },

      mode: 'production'

    }

`index.html`

   

   

   

     

     

     

     

   

   

     

   

   

webpack小白入门【1-2】webpack的基本用法之相关核心概念