![](https://img-blog.csdnimg.cn/20201014180756926.png?x-oss-process=image/resize,m_fixed,h_64,w_64)
webpack
か温暖心ε
这个作者很懒,什么都没留下…
展开
-
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 · 164 阅读 · 0 评论 -
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 · 83 阅读 · 0 评论 -
打包处理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 · 232 阅读 · 0 评论 -
打包字体图标
打包字体图标下载安装 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 · 87 阅读 · 0 评论 -
打包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 · 281 阅读 · 0 评论 -
打包处理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 · 373 阅读 · 0 评论 -
打包处理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 · 380 阅读 · 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 · 1573 阅读 · 0 评论 -
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 · 218 阅读 · 0 评论