node + webpack 项目打包部署之webpack安装以及使用

webpack安装：

webpack是基于nodejs开发，所以要提前保证安装了nodejs

一、node安装

1、Node.js 官方网站下载：https://nodejs.org/en/download/

下载完成过，下一步下一步进行安装

然后win+R →cmd →

安装成功，测试安装是否成功，运行CMD，分别输入node -v 和 npm -v 分别查看node和npm的版本号

安装完成后系统目录如图所示（其中，npm随安装程序自动安装，作用就是对Node.js依赖的包进行管理）

二、webpack 安装

全局安装： npm install webpack-cli -g。

1、本地创建项目 如：D:\HbuilderX\test

2、webpack -v 查看webpack版本 webpack-cli -v 查看cli版本

3、cd进入项目文件夹，使用指令 npm init 初始化项目，提示填写一些信息，不填写就enter跳过表示默认，然后在项目根目录下会生成package.js文件，即为打包配置文件

4、npm install 在项目跟目录下安装node_modules，nodejs的依赖文件、

5、如果npm install 创建失败返回0，那么使用npm install express指令

三、webpack 简单实用方法

基于commonJS的JS方法导入导出

方法文件js： common.js

function test(){
    console.log('webpack-test')
}

module.exports = {

    test

}

//or或者

exports {

    test

}

入口文件js： index.js

四、开始打包

继npm5.2之后，可直接使用 npx webpack

或者在package.json文件中的"script"中新增对象，如：

"script": {
       "build":  "webpack",  //打包
       "serve":  "webpack dev server" //创建本地服务
}