webpack学习之helloworld(一)

1、webpck是什么

webpack 是一个现代 JavaScript 应用程序的静态模块打包器(static module bundler)。在 webpack 处理应用程序时，它会在内部创建一个依赖图(dependency graph)，用于映射到项目需要的每个模块，然后将所有这些依赖生成到一个或多个bundle

2、从零搭建一个helloworld

       2.1   安装webpack

                      2.1.1  创建helloworld项目     mkdir webpack-hellowrld

                      2.1.2  安装webpack(webpack4需要安装webpack-cli)     npm init -y (-y直接跳过提问阶段)，npm i webpack webpack-cli --save-dev

                      2.1.3 创建配置文件webpack.config.js，index.js文件，html文件，

                      2.1.4  实现使用lodash的  join 连接字符串，在网页中输出字符串

                      2.1.5 npm安装lodash，在index.js中import lodash的join方法，输出text

import { join } from 'lodash';

function component() {
    var element = document.createElement('div');

    element.innerHTML = join(['Hello', 'webpack'], ' ');

    return element;
  }

  document.body.appendChild(component());

                  2.1.6 配置webpack.config.js文件，入口文件为index.js文件，出口文件输出到dist文件下

                 

const path = require('path')

module.exports = {
    entry: path.resolve(__dirname, '..', 'src/index.js'),
    output: {
        filename: 'index.js',
        path: path.resolve(__dirname, '..', 'dist')
    }
}

                2.1.7 使用命令打包webpack --config build/webpack.config.js

                2.1.8 webpack创建dist文件在dist中生成打包文件，然后再index.html中引用index.js文件

               学习过程中遇到的问题:

               1、在webpack.config.js中使用（..）相对路径，一直无法找到src/index.js文件，后来用path.resolve获取文件的路径，

                    _dirname为当前模块的绝对路径

             

           这只是我学习的过程记录。创建你的webpack  hellowworld前往webpack官网有更完整的演示：https://webpack.docschina.org/guides/getting-started/,