何为Webpack

Webpack 是一个开源的JavaScript模块打包工具，核心功能是解决模块之间的依赖，把各个模块按照特定的规则和顺序组织在一起，最终合成一个（或多个）JS文件。
webpack会自动地递归解析入口所需要加载的所有资源文件，然后用不同的Loader来处理不同的文件，用Plugin来扩展webpack功能。
webpack 是一个静态模块打包器，所有前端资源都会作为模块来处理，webpack根据模块的依赖关系进行静态分析，打包形成静态资源。

五个核心概念

Entry
Output
Loader
Plugin
Mode
生产环境会压缩代码

webpack 项目

新建工程项目

npm init

根据提示操作即可

安装Webpack

npm install webpack webpack-cli --save-dev

由于将webpack安装到了本地，只能在工程内部使用

npx webpack <command>

打包项目

命令行

npx webpack --entry=src/index.js --output-filename=bundles.js --mode=development

entry是资源打包的入口，默认是src/index.js
output-filename是输出资源名
mode是打包模式，有development、production、none三种模式

npm scripts

在package.json中加入脚本命令

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "build":"webpack --entry=./index.js --output-filename=bundles.js --mode=development"
  },

打包命令可改为

npm run build

配置文件

将参数改为对象的形式专门放在一个配置文件里，在Webpack打包时读取改配置文件。
默认配置文件为webpack.config.js

module.exports = {
  entry: './src/index.js',
  output:{
    filename:'bundle.js',
  },
  mode:'development',
}

webpack对于outpath的要求是使用绝对路径（从系统根目录开始的完整路径），在webpack.config.js中，通过调用Node.js的路径拼装函数——path.join,将__dirname（Node.js内置全局变量，值为当前文件所在的决定路径）与dist连接起来。
加入webpack.config.js后可以去掉package.json中的打包参数了

"scripts": {
    "build":"webpack"
  },

webpack-dev-server

devServer对象是专门用来放webpack-dev-server配置的，webpack-dev-server可以看做一个服务，主要工作是接受浏览器的请求，然后将资源返回，即可以通过http://localhost:8080方式访问，而不必打开index.html方式访问。当服务启动时，会先让webpack进行模块打包，并将资源准备好（bundle.js），接受请求时会对资源URL地址进行校验，若是资源服务地址，则返回打包结果中的资源，若不是，则返回源文件。
webpack-dev-server在开发模式下只是将打包结果放进内存中，并不会写入硬盘中。
webpack-dev-server还有一个特性就是自动刷新，当webpack-dev-server发现工程源文件进行了更新操作就会自动刷新浏览器，显示更新后的内容。

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

在package.json中增加webpack-dev-server指令

"scripts": {
  "build": "webpack",
  "dev": "webpack-dev-server"
  },

在webpack.config.js中配置webpack-dev-server

module.exports = {
  entry: './src/index.js',
  output: {
    filename: 'bundle.js',
  },
  mode: 'development',
  devServer: {
    // publicPath: '/dist', 不能识别publicPath配置
     // 自动gzip压缩
    compress: true,
    // 端口号
    port: 8080,
    // 自动打开浏览器
    open: true,
  },
}

运行服务

npm run dev

devServer不能识别publicPath、contentBase配置，可以先注释掉，能正常运行
// publicPath: ‘/dist’,
// contentBase: resolve(__dirname, ‘build’),

Webpack简介