webpack的基础配置

首先创建一个新的目录，然后初始化npm，在本地安装webpack和webpack-cli

npm init -y
npm install webpack webpack-cli -D //-D 表示开发依赖，上线的时候不需要

webpack可以进行零配置（弱配置）

webpack打包工具，将js代码进行打包（按js模块），可以将js代码模块化。

npx webpack //默认将index.js的代码打包成dist目录下的main.js

运行npx webpack会进入node_modules/bin/webpack.cmd文件执行 

@IF EXIST "%~dp0\node.exe" (
  "%~dp0\node.exe"  "%~dp0\..\webpack\bin\webpack.js" %*
) ELSE (
  @SETLOCAL
  @SET PATHEXT=%PATHEXT:;.JS;=;%
  node  "%~dp0\..\webpack\bin\webpack.js" %*
)

判断是否有node.exe没有则执行上一级webpack文件中的\bin\webpack.js文件 

手动配置webpack

默认配置文件名是webpack.config.js

// webpack.config.js文件的内容
// webpack是node写出来的 node的写法
let path = require('path')

module.exports = {
  mode: 'development', // 模式默认有两种production（生产模式）、development（开发模式），开发模式的代码不压缩看的清晰
  entry: './src/index.js', // 入口文件
  output: {
    filename: 'bundle.[hash:8].js', // 打包后文件名，[hash:8]表示每次打包都在文件名中加入一个 hash值，并且只显示前8位
    path: path.resolve(__dirname, 'dist'), // 打包后路径必须是绝对路径resolve方法把相对路径解析成绝对路径，__dirname加不加都可以，它代表在当前目录下产生一个dist目录
  },
}

如果要更改配置文件的文件名，在打包时可以使用 npx webpacck --config 文件名.js 语句。

另一种方法是在package.json文件中添加脚本（如果没有这个文件可以新建一个）：

{
  "scripts": {
    "build": "webpack --config webpack.config.my.js"
  }
}

这样在运行时可以使用npm run build语句来配置webpack。

使用开发服务

使用开发服务可以在内存中进行虚拟打包，并返回一个localhost地址来展现结果。使用npm来安装开发服务

npm install webpack-dev-server -D

可以使用npx webpack-dev-server来运行开发服务，但会以当前目录为静态目录。

可以在webpack.config.js中的module.exports中添加开发服务的配置

devServer: { // 开发服务器的配置
  port: 3000, // 改端口
  progress: true, // 进度条
  contentBase: './build' // 以build目录为静态目录
  // compress： true   // 压缩
}

如果当前目录下没有build目录那打包生成的localhost就会出错。此时可以使用html-webpack-plugin插件来自动生成一个html文件打包到内存中。使用npm来安装插件

npm install html-webpack-plugin -D

在webpack.config.js中创建一个变量引入html-webpack-plugin插件

let HtmlWebpackPlugin = require('html-webpack-plugin');

然后在module.exports中添加html-webpack-plugin插件的配置，这里可以建立一个存放所有webpack插件的配置的数组，方便以后引入跟多的插件

plugins: [ // 存放webpack插件的配置的数组
  new HtmlWebpackPlugin({
    template: './src/index.html', // 模板的位置
    filename: 'index.html', // 打包后的文件名
    minify: { // 压缩html文件
      removeAttributeQuotes: true, // 删除html标签属性中的双引号
      collapseWhitespace: true // 将代码变成一行
    }，
    hash: true // 在引入script文件时带上一个hash值
  })
]