webpack 打包（初学打包运行）

第一步：

       1、 新建一个文件夹，

        

        2、 点击进入该文件夹，

        3、 点击搜索 输入  cmd +回车（Enter）打开命令提示符

        

        4、进入到 当前文件夹的 CMD 指令 

        

第二步：

        1、输入 npm init -y 初始化 npm 

        

         2、文件夹会出现 packge.json 的文件夹

        

       3、 接着安装 webpack-cli（此工具用于在命令行中运行 webpack）：

npm install webpack webpack-cli --save-dev

        4、 安装完成后 文件夹会有 node_modules 和 package-lock.json

 

第三步：

        1、将文件夹导入编程工具 

        2、在myWebpack2下新建一个index.html   、webpack.config.js 以及一个app目录 ，并在app目录下 新建  index.js  文件     

                        

        3、在webpack.config.js 下输入

const path = require('path');//导入node内置path模块

module.exports = {
   
  mode:"development",    //设置模式  开发者模式
  entry: './src/index.js',  //入口文件路径
  
  output: {
    filename: 'main.js',  //main 这里可以自己取名字
    path: path.resolve(__dirname, 'dist'),//__dirname  项目路径  //path 出口路径
    
    //更新一次代码 自动清理文件
    clean:true
  },
  
  //需要自己添加模块配置
  module:{        
  	rules:[],
    }
};

        4、在 index.js 下输入

import _ from 'lodash';

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

  // lodash（目前通过一个 script 引入）对于执行这一行是必需的
  // lodash 在当前 script 中使用 import 引入
   element.innerHTML = _.join(['Hello', 'webpack'], ' ');
   
   return element;
 }

 document.body.appendChild(component());

        5、在 index.html 下输入

        6、在 package.json 下 加入  

"build": "webpack"

第四步：

       1、 要在 index.js 中打包 lodash 依赖，我们需要在本地安装 library：

npm install --save lodash

在安装一个 package，而此 package 要打包到生产环境 bundle 中时，你应该使用 npm install --save。如果你在安装一个用于开发环境的 package 时（例如，linter, 测试库等），你应该使用 npm install --save-dev。

        

        2、执行 npx webpack，会将我们的脚本 src/index.js 作为 入口起点，也会生成 dist/main.js 作为 输出。Node 8.2/npm 5.2.0 以上版本提供的 npx 命令，可以运行在初次安装的 webpack package 中的 webpack 二进制文件（即 ./node_modules/.bin/webpack）：

npx webpack

         3、运行  index.html   成功