webpack4基本使用（一)

webpack0配置

npx webpack
自动会把 src/index.js 打包到 dist/main.js
webpack ./he.js -o ./dist
版本升级后差异：https://blog.csdn.net/qq_43612538/article/details/109389674

webpack 基本使用

• 默认 根目录的配置文件 webpack.config.js
• 可以修改的指定配置文件
  webpack -- config webpack.my.js

{
  "name": "webpack-demo",
  "version": "1.0.0",
  "main": "index.js",
  "license": "MIT",
  "scripts": { // 通过npm run 命令 会自动取找node_modules 下的bin/webpack.cmd -> webpack
    "build":"webapck"  
  },
  "devDependencies": {
    "webpack": "4.14.0",
    "webpack-cli": "^4.2.0"
  }
}

webpack html插件（HtmlWebpackPlugin）

• HtmlWebpackPlugin简化了HTML文件的创建，以便为你的webpack包提供服务。这对于在文件名中包含每次会随着编译而发生变化哈希的 webpack bundle 尤其有用。 你可以让插件为你生成一个HTML文件，使用lodash模板提供你自己的模板，或使用你自己的loader。
• 我们可以自己配置一个 服务器去运行自己的文件
  
  yarn add webpack-dev-server -D
• 可以通过 脚本 npx webpack-dev-server ,不会打包文件，只是把打包写入内存中，会以当前目录作为静态目录

注意
webpack-cli 与 webpack-dev-server 版本间不兼容，否则会报错(https://www.cnblogs.com/rapale/p/13863511.html)
"webpack": "^4.43.0",
"webpack-cli": "^3.3.12",
"webpack-dev-server": "^3.11.0"

• 但是我们运行开发服务器时，希望把src/index.html,打包后自动放入到对应的 静态文件夹中访问，这个时候使用 html-webpack-pulgin

//#endregion
let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");

// /**@type {import('webpack').Configuration}*/
const config = {
    mode:"production",//模式 默认两种 product development
    entry:"./src/index.js",// 入口
    output:{
        path: path.resolve(__dirname, "build"),//路径必须是绝对路径
        filename:"bundle.[hash].js",//可以设一个一个hash值 防止缓存
    },
    //开发服务配置
    devServer:{
        port:3000,//端口号
        progress:true,//显示进度条
        contentBase:"./build",//服务器的静态跟目录
        compress:true,//运行是否压缩
    },
    //webpack 插件
    plugins: [
        new HtmlWebpackPlugin({//自动引入js文件
            template:"./src/index.html",//模板文件
            filename:"index.html",//打包后的
            minify:{//压缩打包后的index.html
                removeAttributeQuotes:true,//去掉打包后的index.html中的引号
                collapseWhitespace:true,//打包后的index.html折叠这一行
                
            },
            hash:true,//打包出现一个hash
        })
    ]
}


module.exports = config;

webpack css处理 loader

• loader 让 webpack 能够去处理那些非 JavaScript 文件（webpack 自身只理解 JavaScript）。loader 可以将所有类型的文件转换为 webpack 能够处理的有效模块，然后你就可以利用 webpack 的打包能力，对它们进行处理。

本质上，webpack loader 将所有类型的文件，转换为应用程序的依赖图（和最终的 bundle）可以直接引用的模块。

• 安装 css-loader style-loader 运行 npm run dev 会报错 TypeError: this.getResolve is not a function (https://blog.csdn.net/qq_36069339/article/details/100544821)

{
"css-loader": "^3.6.0",
"style-loader": "^2.0.0",
"sass-loader":"
}

let path = require("path");
let HtmlWebpackPlugin = require("html-webpack-plugin");

// /**@type {import('webpack').Configuration}*/
const config = {
    mode:"production",//模式 默认两种 product development
    entry:"./src/index.js",// 入口
    output:{//打包后的文件配置
        path: path.resolve(__dirname, "build"),//路径必须是绝对路径
        filename:"bundle.js",//可以设一个一个hash值 防止缓存
    },
    //开发服务配置
    devServer:{
        port:3000,//端口号
        progress:true,//显示进度条
        contentBase:"./build",//服务器的静态跟目录
        compress:true,//运行是否压缩
    },
    //webpack 插件
    plugins: [
        new HtmlWebpackPlugin({//自动引入js文件
            template:"./src/index.html",//模板文件
            filename:"index.html",//打包后的
            // chunks: ["manifest", "vendor",],
            minify:{//压缩打包后的index.html
                removeAttributeQuotes:true,//去掉打包后的index.html中的引号
                collapseWhitespace:true,//打包后的index.html折叠这一行
                
            },
            hash:true,//打包出现一个hash
        })
    ],
    //webpack loader
    module: {//模块
        rules:[//规则 css-loader 接续@import 语法
            //style-loader 他是把css插入到head的标签中，默认位置底部
            //loader 特点 希望单一 作用将任何文件转换成模块
            // loader的用法 字符串只能 用一个loader
            //多个lader 需要 []
            // 如果又额外参数 [{},{}]
            //执行顺序 从右向左，从下到上
            {
                test: /\.css$/,
                use: [{
                    loader: "style-loader"
                },"css-loader"]
            }
        ]
    }
}


module.exports = config;