exe打包工具哪个最好_最好的前端打包工具之一···Webpack

新手菜鸟第一次发表文章，如有哪里写的不对，请大佬们指出错误，小子我肯定虚心接受。(本文参考webpack中文文档书写）

概念 | webpack 中文网​www.webpackjs.com

话不多少，直接上（主要是也不知道说啥）：

一 简单安装和运行webpack

1.首先是安装全局的命令行，创建一个文件夹（名字自己命名）(有-g的命令行代表全局，在哪里运行都可以，只需要安装一次,打开命令行：shift+鼠标右键)

npm install -g webpack

npm install -g webpack-cli

2.创建项目，初始化package.json文件

npm init

3.安装项目依赖的webpack

npm install --save-dev webpack

npm install --save-dev webpack-cli

4.创建两个文件夹（例：src：源码文件和dist：打包之后的文件），在src文件中创建app.js和hello.js文件一会用到。

app.js中写:

//引入hello.js中的内容

var hello = require("./hello.js");

document.getElementsByTagName("body")[0].appendChild(hello());

hello.js中写：

将内容发到app.js中(es5 使用 module.exports es6使用 export )

module.exports = function(){

var divs = document.createElement("div");

divs.textContent = "文本信息";

return divs;

}

5.在项目根目录增加配置文件webpack.config.js

const path = require('path');

module.exports = {

选择线上或者线下二选一

mode: 'production' //线上

mode: 'development'，//开发

入口，定义整个变成的起点

entry:"./src/app.js",

出口，定义整个变成的终点

output:{

压缩后的路径

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

压缩后的文件的名字

filename:"bundle.js"

}

}

6执行：webpack

(在dist下面创建index.html，引用bundle.js即可看到效果（后面会删除，因为开始写代码不会创建dist压缩文件))

二安装webpack服务器

1.全局安装

npm install -g webpack-dev-server

2.项目依赖安装

npm install -D webpack-dev-server

3.运行webpack服务器

webpack-dev-server

4.快捷执行方案（写在package.json中）

"scripts": {

线上环境

"build": "webpack",

开发环境

"start": "webpack-dev-server --progress"

}

5.修改服务器配置

在webpack.config.js文件中配置：

devServer:{

contentBase: path.join(__dirname, "dist"),

host: "0.0.0.0",

端口可以改

port: 8081

}

6命令行配置（因为这属于刚开发，用开发命令）

npm start

然后再网页中输入 locahhost:8080

提示：

1.如果cmd出现警告替换以下两个单词

mode: 'production' //线上

mode: 'development'，//开发

2.测试完了以后，关闭自己的服务器（ctrl+c）

好了，这就是一个简单的webpack安装和webpack服务器安装了，以后陆续会有后续补充。如果有什么地方写的不对的地方，或者缺少的地方，希望各位广提意见，小子会虚心改正和学习的。