二、webpack4.0配置篇

一、打包多页应用

新建一个项目，里面新建src目录，在src目录新建index.js 和 other.js。

webpack

src/index.js:

console.log('index.js')

src/other.js:

console.log('other.js')

初始化package.json:

npm init -y

安装：

npm install webpack webpack-cli -D

在根目录新建一个配置文件webpack.config.js。

webpack.config.js:

let path = require('path');
module.exports = {
    // 模式
    mode: 'development',
    // 多入口，要打包多个文件
    entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 代表的是home 或者 other
        // [hash] 代表的是hash值
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    }
}

运行：

npx webpack

打包结果：

生成两个js文件。

webpack

2、对html页面进行打包。

安装：

npm install html-webpack-plugin -D

html-webpack-plugin的作用，就是利用我们的html模板，打包成新的html文件，并自动把我们的js文件插入到html中去。

在根目录下，新建index.html。

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>

</body>
</html>

在webpack.config.js中进行配置：

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    // 模式
    mode: 'development',
    // 多入口，要打包多个文件
    entry: {
        home: './src/index.js',
        other: './src/other.js'
    },
    output: {
        // [name] 代表的是home 或者 other
        filename: '[name].[hash].js',
        path: path.resolve(__dirname, 'dist')
    },
    plugins: [
        new HtmlWebpackPlugin({
            // 选择一个html文件作为模板
            template: './index.html',
            // 打包后生成的html文件名
            filename: 'home.html',
            // chunks是代码块
            // 保证home.html只引入home.js
            chunks: ['home']
        }),
        new HtmlWebpackPlugin({
            // 选择一个html文件作为模板
            template: './index.html',
            // 打包后生成的html文件名
            filename: 'other.html',
            // chunks是代码块
            // 让other.html 同时引入 other.js 和 home.js 文件。
            chunks: ['other','home']
        })
    ]
}

运行：

npx webpack

打包结果：

webpack

其中other.html文件同时引入了home.js 和 other.js 。

二、配置source-map

我们可能会把高级语法(比如: ES6、7)转成低级语法(比如：ES5) ，而配置一些babel相关的内容。

安装babel:

npm install @babel/core @babel/preset-env babel-loader webpack-dev-server -D

@babel/preset-env 是用来将ES6语法转换成ES5语法的。

在src/index.js里面写些ES6的语法：

console.log('index.js')

// ES6语法
class Log {
  constructor () {
    console.lo('出错了')
  }
}
let log = new Log()

在webpack.config.js中进行配置：

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // (1) 第一种方式
  // 调试代码，需要源码映射
  // 增加映射文件， 可以帮我们调试源代码
  // source-map 就叫源码映射，会单独生成一个sourcemap文件,叫 home.js.map
  // 而且出错了，会标识当前报错的列和行
  devtool: 'source-map',


  // (2) 第二种方式
  // eval-source-map 不会产生单独的文件，但是可以显示行和列。
  // devtool: 'eval-source-map',


  // (3) 第三种方式
  // 不会产生列，但是会产生一个单独的映射文件
  // 产生后你可以保留起来，用于调试
  // devtool: 'cheap-module-source-map',


  // (4) 第四种方式
  // 不会生成文件，集成在打包后的文件中，不会产生列
  // devtool: 'cheap-module-eval-source-map',
    
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    })

  ]
}

source-map 的作用，是用来生成一个映射文件，然后查看错在第几行和第几列，用来调试代码。

在package.json里面配置一下启动脚本：

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

所以，npm run build 就相当于 npx webpack。

进行打包：

npm run build

会生成一个独立的 home.js.map 文件，用来调试代码。

运行：

npm run dev

来起一个服务。

三、watch的用法

我们希望改完代码之后，可以自动重新打包出实体文件。

src/index.js:

console.log('index.js')

// ES6语法
class Log {
  constructor () {
    console.log('出错了')
  }
}
let log = new Log()

在webpack.config.js中进行配置：

let path = require('path')
let HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
  // 模式
  // 生产环境下会自动将打包后的js进行压缩
  mode: 'production',
  entry: {
    home: './src/index.js'
  },
  // 规则
  module: {
    rules: [
      {
        // 找到所有的js文件
        test: /\.js$/,
        use: {
          // 使用babel将ES6语法转换成ES5语法
          loader: 'babel-loader',
          options: {
            presets: ['@babel/preset-env']
          }
        }
      }
    ]
  },
  // 监控当前代码的变化
  // 代码一变化，就帮我实时打包。生成实体文件。
  watch: true,
  // 监控的选项
  watchOptions: {
      poll: 1000, // 每秒 问我 1000次
      aggregateTimeout: 500, // 防抖, 500毫秒内我输入的东西，只打包一次
      // 忽略这个文件夹，不监控 node_modules 目录
      ignored: /node_modules/
  },
  output: {
    // [name] 代表的是home 或者 other
    filename: '[name].[hash].js',
    path: path.resolve(__dirname, 'dist')
  },
  plugins: [
    new HtmlWebpackPlugin({
      // 选择一个html文件作为模板
      template: './index.html',
      // 打包后生成的html文件名
      filename: 'index.html'
    })

  ]
}

运行打包：

npm run build