1. 安装步骤

（1）安装全局webpack【node.js安装】
npm install -g webpack
npm install -g webpack-cli（webpack 4X 后需要安装webpack-cli ）
（2）npm init 初始化项目
目的: 在项目中引导创建一个package.json文件。package.json是基于nodejs项目必不可少的配置文件，它是存放在项目根目录的普通json文件。
步骤：npm init命令后，npm会询问你一系列问题，当你填入答案后才会正式结束初始化，如果不太想自定义一些关于项目的描述，可以不敲npm init，而是直接敲npm init --yes
Package.json 属性说明：
name - 包名。
version - 包的版本号。
description - 包的描述。
homepage - 包的官网 url 。
author - 包的作者姓名。
contributors - 包的其他贡献者姓名。
dependencies - 依赖包列表。如果依赖包没有安装，npm 会自动将依赖包安装在 node_module 目录下。
repository - 包代码存放的地方的类型，可以是 git 或 svn，git 可在 Github 上。
main - main 字段指定了程序的主入口文件，require('moduleName') 就会加载这个文件。这个字段的默认值是模块根目录下面的 index.js。
keywords - 关键字
（2）npm install 下载依赖
详细查看我的另外一篇文章，在这里要在项目中安装webpack：npm install --save-dev webpack

2.在终端进行打包

webpack {entry file} {destination for bundled file}
（1）webpack4.0以上命令行模式下【不用配置文件】
命令：webpack js/index.js -o html/bundle.js --mode development 【注：-o 代表打包输出文件，-mode 选择版本模式】

image.png

webpack同时编译了main.js 和Greeter,js,合并生成了一个文件bundle.js。
（2）webpack4.0以下版本模式
webpack js/index.js html/bundle.js （非webpack4.0）

我们可以在package.json配置执行命令：

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack js/index.js -o html/bundle.js --mode development"
  }
//bat文件运行:npm run {script name}
npm run build

终端中进行复杂的操作，其实是不太方便且容易出错的，通常都是通过配置文件处理。
（3）webpack 命令参数说明

"scripts": {
    "build": "webpack  --profile --progress --colors --display-error-details",
    "dev": "webpack  --display-modules --profile --progress --colors --display-error-details"
}

color 输出结果带彩色，比如：会用红色显示耗时较长的步骤
profile 输出性能数据，可以看到每一步的耗时
progress 输出当前编译的进度，以百分比的形式呈现
display-modules 默认情况下 node_modules 下的模块会被隐藏，加上这个参数可以显示这些被隐藏的模块
display-error-details 输出详细的错误信息

3.通过配置文件来使用Webpack

（1）项目根目录下新建webpack.config.js文件

//“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
module.exports = {
  entry:  __dirname + "/js/index.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/html",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  }
}

(2) 执行webpack命令，命令会自动引用webpack.config.js文件中的配置选项。

image.png

或者通过bat文件

  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack js/index.js -o html/bundle.js --mode development"
    "start":"webpack"
  }

4.Source Maps

通过打包后的文件，是不容易找到出错了的地方，对应的你写的代码的位置的，Source Maps就是来帮我们解决这个问题的。在webpack的配置文件中配置source maps，需要配置devtool。配置项很多，详细说明：

eval： 使用eval包裹模块代码,eval关键字的配置项并不单独产生.map文件。
source-map： 产生.map文件
cheap： 不包含列信息（关于列信息的解释下面会有详细介绍)也不包含loader的sourcemap
module： 包含loader的sourcemap（比如jsx to js ，babel的sourcemap）
inline： 将.map作为DataURI嵌入，不单独生成.map文件（这个配置项比较少见）

举例：eval-source-map是eval和source-map的组合，可知使用eavl语句包括模块，也产生了.map文件。webpack将.map文件作为DataURI替换eval模式中末尾的//# souceURL。
配置项目分析和区别：

• webpack在构建时的性能上， 总的来说eval性能最好，source-map性能最低。
• 使用 cheap 模式可以大幅提高 souremap 生成的效率。大部分情况我们调试并不关心列信息，而且就算 sourcemap 没有列，有些浏览器引擎（例如 v8） 也会给出列信息
• 使用 module 可支持 babel 这种预编译工具（在 webpack 里做为 loader 使用）。
• val-source-map 模式可以减少网络请求。这种模式开启 DataUrl 本身包含完整 sourcemap 信息，并不需要像 sourceURL 那样，浏览器需要发送一个完整请求去获取 sourcemap 文件，这会略微提高点效率。而生产环境中则不宜用 eval，这样会让文件变得极大。

总结出最佳模式:
(1)开发环境推荐:cheap-module-eval-source-map
(2)生产环境推荐:cheap-module-source-map （这也是下版本 webpack 使用-d命令启动 debug 模式时的默认选项）
注：vue-cli脚手架搭建的工程，开发环境使用的是eval-source-map，生产环境用的是source-map。正式环境如果直接将sourceMap放入打包后的文件，会明显增大文件的大小，不利于静态文件的快速加载；而外联.map时，.map文件只会在F12开启时进行下载（sourceMap主要服务于调试），故推荐使用外联.map的形式。

4.webpack构建本地服务器

让浏览器监听代码的修改，并自动刷新显示修改后的结果，Webpack提供一个可选的本地开发服务器插件： webpack-dev-server，先要安装此插件

npm install --save-dev webpack-dev-server

devserver作为webpack配置选项中的一项,参数说明：

• contentBase
  默认webpack-dev-server会为根文件夹提供本地服务器，如果想为另外一个目录下的文件提供本地服务器，应该在这里设置其所在目录（本例设置到“public"目录）
• port
  设置默认监听端口，如果省略，默认为”8080“
• inline
  设置为true，当源文件改变时会自动刷新页面
• historyApiFallback
  在开发单页应用时非常有用，它依赖于HTML5 history API，如果设置为true，所有的跳转将指向index.html

具体配置

//webpack.config.js
//“__dirname”是node.js中的一个全局变量，它指向当前执行脚本所在的目录
module.exports = {
  devtool: 'cheap-module-eval-source-map',
  entry:  __dirname + "/js/index.js",//已多次提及的唯一入口文件
  output: {
    path: __dirname + "/html",//打包后的文件存放的地方
    filename: "bundle.js"//打包后输出文件的文件名
  },
   devServer: {
    contentBase: "./html",//本地服务器所加载的页面所在的目录
    historyApiFallback: true,//不跳转
    port:"8081",
    inline: true//实时刷新
  } 
}
//package.json
  "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start":"webpack",
    "server": "webpack-dev-server --open"
  }

执行 npm run server命令，浏览器输入地址，修改js源文件，浏览器自动刷新页面。

image.png