か温暖心ε-CSDN博客

原创 webpack.config.js整体配置(基础)

webpack.config.js整体配置const { resolve } = require('path')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const OptimizeCssAssetsWebpackPlugin = require('optimize-css-assets-webpack-p

2021-03-26 14:48:46 180

原创 webpack开发服务器

开发服务器 devServer: 用来自动化(自动编译,自动打开浏览器,自动刷新浏览器)npm install webpack-dev-server -Dconst path = require(‘path’)特点:只会在内存中编译打包,不会有任何输出.启动指令为 webpack serve* module.exports = { //webpack5 自动运行方式 target:"web" devServer:{ //设置根目录

2021-03-26 14:46:11 91

原创打包处理js文件中的高级语法

打包处理js文件中的高级语法安装babel转换器相关的包: npm i babel-loader ‘@babel/core’ ‘@babel/preset-env’ -D—只能处理基础的兼容npm i @babel/polyfill -D—处理全部的兼容—在js代码最上面添加 import ‘@babel/polyfill’—问题:体积太大需要按需加载:—> corejs 选3不选2npm i core-js -D在webpack.config.js 的module

2021-03-26 14:44:32 242

原创打包字体图标

打包字体图标下载安装 npm i file-loader -D* module.exports = { module:{ rules:[{ exclude:/\.(html|png|jpg|css|js)$/, //排除选择的文件,打包其他文件 loader:'file-loader', options:{

2021-03-26 14:42:36 96

原创打包css:url图片资源与html:src资源

打包css:url图片资源与html:src资源使用 url-loader和file-loader两个包下载安装 npm i url-loader file-loader -D使用 module.exports = { module:{ rules:[{ test:/\.(jpg|png)$/, //使用一个loader loade

2021-03-26 14:41:35 295

原创打包处理less文件和打包处理sass文件

打包处理less文件运行 npm i less-loader less -D 命令在webpack.config.js 的module -> rules 数组中,添加loadermodule.exports = { module:{ rules:[{ test:/\.less$/, use:[ 'style-loader',

2021-03-26 14:38:08 385

原创打包处理css文件

打包处理css文件,先以模块的形式引入js运行npm i style-loader css-loader -D 命令,安装处理css文件的loader在webpack.config.js 的module -> rules 数组中,添加loader module.exports = { module:{ rules:[{ test:/\.css$/, use:

2021-03-26 14:36:47 392 1

原创 webpack5打包单个html文件以及打包多个html文件

打包html方法使用插件(plugins)对HTML文件进行处理(html-webpack-plugin)下载安装 npm i html-webpack-plugin -D引入插件 const HtmlWebpackPlugin = require(‘html-webpack-plugin’)使用插件 plugins: [ // 调用插件 new HtmlWebpackPlugin({ //创建一个新的html文件,自动引入打包输出的所有

2021-03-26 14:32:48 1608

原创 webpack打包js 单入口与多入口

webpack打包js 单入口与多入口* const path = require('path')* module.exports = { //'production'`在这里插入代码片`开发模式.不压缩代码,打包速度快. mode: 'development', //生产模式,进行代码压缩,打包速度慢. //单文件入口,单出口 String类型 entry: './src/index.js', output: { filename:

2021-03-26 14:29:24 226

qq_43670950的博客