webpack4个人学习详细笔记（一)---基础配置

https://ke.qq.com/course/368629

基础篇

初始化项目，并安装本地的webpack

yarn init -y
yarn add webpack webpack-cli -D

webpack 可以进行0配置

-打包工具 --> 输出后的结果（js 模）

npx webpack

手动配置webpack

默认配置文件的名字为 webpack.config.js

// webpack 是node 写出来的， node  的写法

let path = require('path');
module.exports = {
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash].js',
    path: path.resolve(__dirname, 'dist'),  // 路径必须为绝对路径
  },
}

可以指定执行哪个配置文件 --config

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

Html插件

1. webpack 内置的开发服务

   yarn add webpack-dev-server -D
   

生成内存中的一个打包文件

npx webpack-dev-server

yarn add html-webpack-plugin

webpack.config.js

let path = require('path');
let HtmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
  devServer: { // 开发服务器的配置
    port: 3000,
    progress: true,
    contentBase: './dist', // 当前静态服务的路径
    open: true,  // 自动打开浏览器
  },
  mode: 'development',
  entry: './src/index.js',
  output: {
    filename: 'bundle.[hash: 8].js',
    path: path.resolve(__dirname, 'dist'),
  },
  plugins: [ // 放着所有webpack 插件
    new HtmlWebpackPlugin({
      template: './src/index.html',
      filename: 'index.html', // 打包后的文件名
      minify: { // 压缩
        removeAttributeQuotes: true // 删除双引号
      },
      hash: true //哈希戳
    })
  ]
}