/*
Webpack是一种前端资源构建工具,一个静态资源打包器。
在Webpack看来,前端所有的资源文件js、css、json、img、less都会作为模块处理。
它根据模块的依赖关系进行静态分析,打包生成对应的静态文件。
Webpack五大核心概念
1.Entry
入口指示 Webpack以哪个文件为入口起点开始打包,分析构建内部依赖图
2.Output
输出指示 Webpack打包后的资源 bundles输出到哪里去,以及如何命名
3.Loder
让Webpack能够去处理那些非js文件
4.Plugins
Plugin是(插件)可以用于执行范围更广的任务,插件的范围包括从打包优化和压缩,一直重新定义环境中的的变量等
5.Mode
模式指示 Webpack使用相应的模式配置(development、production)
*/
const { resolve } = require("path");
// const HtmlWebpackPlugin = require("html-webpack-plugin");
module.exports = {
entry: "./src/index.js",
output: {
filename: "main.js",
path: resolve(__dirname, "build"),
},
module: {
rules: [
// { test: /\.css$/, use: ["style-loader", "css-loader"] },
{ test: /\.less$/, use: ["style-loader", "css-loader", "less-loader"] },
{
//排除资源
// exclude:/\.(css|js|html)$/,
// options: {
// name: "[hash:10].[ext]",
// outputPath:"",
// },
},
],
},
// plugins: [new HtmlWebpackPlugin({ template: "./src/index.html" })],
mode: "development",
//开发服务器 devServer:用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)
//特点:只会在内存中编译打包,不会有任何输出
//启动devServer指令为:npx webpack-dev-server
devServer: {
// contentBase: resolve(__dirname, "build"),移除
static: resolve(__dirname, "build"),
//启动gzip压缩
compress: true,
//端口号
port: 3000,
//自动打开浏览器
open: true,
},
};
webpack基本配置
于 2022-05-26 16:41:02 首次发布