webpack打包步骤

webpack打包步骤：

Webpack 是一个前端资源加载/打包工具。

为什么不手动的复制粘贴，合并文件？

web业务越来越复杂和多元，所以目前讲究前端工程化。
前端工程化的主要目标是解放生产力、提高生产效率。

1.安装node环境

NodeJS 下载地址：http://nodejs.cn/download/

NodeJS 安装成功之后，⾃自带 NPM 命令，NPM 指包管理理⼯工具，指在
https://www.npmjs.com/ ⽹网站中上传、下载、管理理我们的 modules-模块

在命令行中使用

node -v 查看node版本 
npm -v 查看npm版本

推荐使用淘宝镜像：npm install cnpm -g --registry=http://registry.npm.taobao.org

首先进入命令行

window 系统：点击开始 -> 运行 -> cmd -> 回车 /win+r+cmd

mac 系统：终端

2.全局安装 webpack 脚⼿手架

命令行 npm i -g webpack-cli

完整写法 npm install --global webpack-cli
i 表示安装 install
g 表示全局 global
webpack-cli 表示webpack脚手架

进入命令行

webpack -v

如有提示：webpack不不是内部或外部命令

npm i -g webpack-cli

再次检查webpack版本

webpack -v

3.创建项目

生产环境 :src目录存放js文件
打包环境 :app目录存放入口文件

project/
    app/
        index.html  生产环境入口文件

    src/
        main.js     打包环境入口文件
        msg.js      模块文件

如上所示 手动的把文件结构和文件都创建出来。

4.进到项目目录

命令行：当前项目目录cmd
命令行：cd至项目目录

5.局部安装 webpack

npm i -D webpack

完整写法： npm install --save-dev webpack
-D 表示开发环境； 完整写法为 --save-dev
–save 表示生产环境； 安装模块时，不写 -D ，那么缺省值就是指 --save

此时目录结构为：

        project/
            node_modules/       模块依赖包
            app/
                index.html      

            src/
                main.js         
                msg.js

node_modules 这个文件夹是自动生成的，里面保存的是从 npmjs.com 这个网站下载的模块。

6.初始化项目

命令行

npm init

一直回车 yes/no = yes创建webpack.json文件

project/
    webpack.json        # 该项目的一些相关信息

7.webpack.config.js文件配置

手动创建webpack.config.js文件

project/
    webpack.config.js   # webpack配置文件

webpack.config.js 写入如下代码

module.exports = {
   
    entry:  __dirname + "/src/main.js",     //入口文件
    output: {
   
        path: __dirname + "/app",           //打包后的文件存放的地方
        filename: "bundle.js"               //打包后输出文件的文件名
    }
}

module模块；exports输出；entry入口；output出口；__dirname指项目绝对路径

8.编写模块与调用

msg.js文件编写

module.exports = function(str){
   
    var div = document.createElement("div");
    div.textContent = str;
    return div;
}

main.js调用模块

var msg = require('msg.js');
document.quer