lxs19930928的博客

目录如下下载相关依赖 yarn add -D clean-webpack-plugin yarn add -D html-webpack-plugin yarn add -D cross-env yarn add -D webpack webpack-cli webpack-dev-server yarn add -D ts-loader typescriptwebpack.config.js配置const {CleanWebpackPlugin} = require("clean

webpack-js压缩(terfer-webpack-plugin) const TerserWebpackPlugin = require("terser-webpack-plugin"); // 压缩js 代替uglify 因为uglifyjs不支持es6语法，所以用terser-webpack-plugin替代uglifyjs-webpack-pluginplugins: [ new TerserWebpackPlugin({ // 压缩js test: /\

图例文件配置（1）生产环境 yarn add -D webpack-merge // 生产模式let webpack = require("webpack");let { merge } = require('webpack-merge')let base = require('./webpack.base')module.exports = merge(base,{ mode: 'production', // 生产模式 plugins: [ new webpack.Def

目录如下：我们指定一个京东页面和淘宝页面，淘宝页面是首页配置代码如下module.exports = { // 模式配置 mode: "production", // 指定模式，默认是生产模式，开发模式便于查看代码 // 入口配置 entry: { // 多页面配置 jd: "./src/jd.js", // 京东页面 taobao:'./src/taobao.js' // 淘宝页面 }, // 出口配置 output: { path

下载url-loader yarn add -D url-loadermodule: { rules: [ { test: /\.(jpeg|jpg|png|svg|gif)$/, use: { loader: 'url-loader', // 默认使用的是es6模块 options: { // 配置 esModule: false, // 使用common.js规范

webpack文件index.js console.log("aaaa");console.log("bbbb");var a = 111;var b = 2222;import "./index.css"require("./main.less")require("./other.scss")// es6的箭头函数let fn = () => (console.log("es6的箭头函数"))fn();// es7 类的注解@logclass Test{ c

(1): css文件合并(mini-css-extract-plugin) yarn add -D mini-css-extract-plugin const MiniCssExtractPlugin = require("mini-css-extract-plugin"); // 合并css // 装载器配置 module:{ rules: [ { test: /\.css$/, use: [MiniCssExtractPlugin.loa

为什么需要装载器webpack只是支持js和json,对于css，less这种不支持，需要使用loader去转换目录如下src下的index.js引入index.css console.log("aaaa");console.log("bbbb");import "./index.css"npx 打包，可以看到需要一种loader装载器(1) loader装载器处理css lesss 和sass** 1：下载 (yarn add -D css-loader style-l

一： 输入和输出配置以及模式配置图例文件(1): webpack.config.js配置 // webpack是基于node,所以使用module.exportsconst path = require("path")module.exports = { // 入口 出口 loader plugin entry: './src/index.js', mode: 'development', // 指定模式，默认是生产模式，开发模式便于查看代码 output: { path

什么是webpack是前端资源模块化管理和打包工具，可将松散的模块按依赖和规则打包成符合生产环境部署的前端资前端打包工具有哪些 webpack vite rollup gulp等等webpack的四大核心 1: entry 入口 2：output 出口 3：loader 装载器 4: plugin 插件那么我们初始化一个webpack文件yarn init -y 生成一个package.json文件yarn add -D webpack webpack-cli （本地安装）