从0开始基于Webpack5 搭建HTML+Less 前端工程
基于Webpack5 搭建HTMl+Less的前端项目
- 新建一个文件夹(比如命名为webpack)
- 用编辑器打开该文件夹,并在编辑器的终端执行 npm init -y 自动创建package.json 文件
- 新建 src/pages/home 目录文件夹 并创建index.html index.js index.less 文件
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title><%= htmlWebpackPlugin.options.title %></title>
</head>
<body>
<div class="title">webpack5</div>
<div id="app"></div>
</body>
</html>index.js
require('./index.less')
import imgUrl from '@static/images/webpack5.jpeg' const app = document.getElementById('app')
var img = new Image()
img.src = imgUrl
img.width = 500
app.appendChild(img)
index.less
.title {
font-size: 20px;
font-weight: bold;
color: red;
text-align: center;
}
#app{
text-align: center;
} - 安装webpak 以及相关插件的包
#webpack 运行以及html文件生成所用的包
npm install webpack webpack-cli html-webpack-plugin webpack-dev-server clean-webpack-plugin -D
# 解析less文件需要的webpack插件
npm install less less-loader css-loader style-loader -D
#抽取 css文件以及压缩css js需要的webpack插件
npm install mini-css-extract-plugin css-minimizer-webpack-plugin terser-webpack-plugin -D
#拷贝静态文件以及图片压缩所需插件(按需使用)(imagemin-webpack-plugin 需要使用cnpm下载用npm启动会报错,原因暂不明,下同) 适用于html中直接引用图片
npm install copy-webpack-plugin -D
cnpm install imagemin-webpack-plugin -D
#引用图片以及压缩 适用于js中创建img添加图片地址
npm install url-loader filer-loader -D
cnpm install image-webpcak-loader -D也可以用cnpm yarn 等安装
- 创建 webpack.config,js (webpack 配置文件)
webpack.config.js
const path = require('path')const { CleanWebpackPlugin } = require('clean-webpack-plugin')const HtmlWebpackPlugin = require('html-webpack-plugin')const MiniCssExtractPlugin = require('mini-css-extract-plugin')const CssMinimizerPlugin = require('css-minimizer-webpack-plugin')const TerserJSPlugin = require('terser-webpack-plugin')// const CopyPlugin = require('copy-webpack-plugin')// const ImageminPlugin = require('imagemin-webpack-plugin').defaultconst { extendDefaultPlugins } = require('svgo')module.exports = (env) => {const mode = env.production ? 'production' : 'development'return {entry: { home: path.resolve('src/pages/home/index.js') },output: {path: path.resolve('dist'),filename: '[name].[chunkhash].js',},mode,resolve: {alias: {'@static': path.resolve('static'),},},module: {rules: [{test: /\.less$/i,use: [// 解析less 并抽离css,开发环境用syle-loader便于热更新env.production ? MiniCssExtractPlugin.loader : 'style-loader','css-loader','less-loader',],},{test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,use: [{loader: 'url-loader',options: {limit: 8192,},},{loader: 'image-webpack-loader',},],},],},plugins: [// 清空dist(打包文件夹)下所有文件new CleanWebpackPlugin(),// 创建HTML页面,webpack output主要负责提取压缩的js文件,需要用这个插件生成HTML文件new HtmlWebpackPlugin({filename: `index.html`, //生成的文件名template: `./src/pages/home/index.html`, //文件模板不穿会生成一个默认Body内容为空的HTML文件inject: true,title: 'webpack5',favicon: path.resolve(__dirname, 'static/ico/favicon.ico'),chunks: ['home'], // chunks为该页面要包含的js文件}),// new HtmlWebpackPlugin(),new MiniCssExtractPlugin({filename: 'css/[name].[contenthash:8].css',}),// 根据实际情况使用// new CopyPlugin({// patterns: [// {// from: 'static',// to: 'static',// },// ],// }),// 放在CopyPlugin之后可以压缩copy的图片资源// new ImageminPlugin({ test: /\.(jpe?g|png|gif|svg)$/i }),],optimization: {minimize: true,minimizer: [new CssMinimizerPlugin({}),new TerserJSPlugin({terserOptions: {format: {comments: false,},compress: {drop_console: true, // 默认false,设置为true, 则会删除所有console.* 相关的代码。},},extractComments: false,}),],},devServer: {// watchFiles: ['src', 'static'],hot: true,compress: true,port: 8000,open: true,},}} - 在packge.json 配置执行脚本
{
...
"scripts": {
"test": "echo \"Error: no test specified\" && exit 1",
"start": "webpack-dev-server",
"build": "webpack --env production"
},
....
} - 执行 npm start 命令就会自动打开浏览器访问页面
- gitee项目地址 https://gitee.com/jilangyangbo/webpack5.git
从0开始基于Webpack5 搭建HTML+Less 前端工程的更多相关文章
- H5新人福音~零配置搭建现代化的前端工程
X-BUILD一套基于Webpack(v4.21.0)快速搭建H5场景开发环境的脚手架,只需要几分钟的时间就可以运行起来.X-BUILD是针对H5开发的一套自动化构建工具,致力于提升开发效率,减小开发 ...
- 基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建
基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建 http://wenku.baidu.com/view/96fbfe0f581b6bd97f19ea1d.html 用MyE ...
- 第三篇 基于.net搭建热插拔式web框架(重造Controller)
由于.net MVC 的controller 依赖于HttpContext,而我们在上一篇中的沙箱模式已经把一次http请求转换为反射调用,并且http上下文不支持跨域,所以我们要重造一个contro ...
- 第二篇 基于.net搭建热插拔式web框架(沙箱的构建)
上周五写了一个实现原理篇,在评论中看到有朋友也遇到了我的问题,真的是有种他乡遇知己的感觉,整个系列我一定会坚持写完,并在最后把代码开源到git中.上一篇文章很多人看了以后,都表示不解,觉得不知道我到底 ...
- 基于Eclipse搭建Hadoop源码环境
Hadoop使用ant+ivy组织工程,无法直接导入Eclipse中.本文将介绍如何基于Eclipse搭建Hadoop源码环境. 准备工作 本文使用的操作系统为CentOS.需要的软件版本:hadoo ...
- EJB3.0开发环境的搭建
EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...
- Centos7安装Docker 基于Dockerfile 搭建httpd运行环境
Centos7安装Docker 基于Dockerfile 搭建httpd运行环境 docker docker搭建 docker build 本文档完成目标内容如下 使用Docker搭建http服务器一 ...
- 基于Hexo搭建博客并部署到Github Pages
基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...
- Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)
Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具) 最近因为项目关系,收朋友之托,想制作秀场网站,但是因为之前一直没有涉及到这 ...
随机推荐
- 摆烂期的Android学习笔记一
Android大致分为四层架构1.Linux内核层:提供各种硬件驱动,如显示驱动,音频驱动,相机驱 动,蓝牙驱动.... 2.系统运行库层:通过C/c++库为android地图提供支持 3.应用框架层 ...
- 配置Django环境后,运行时报错
(背景)安装完Django,并配置完成. 在setting.py中设置了数据库时,出现的报错. 点击查看 数据库配置 DATABASES = { 'default': { # 'ENGINE': 'd ...
- HashMap:为什么容量总是为2的n次幂
HashMap:为什么容量总是为2的n次幂1).HashMap是根据key的hash值决定key放到哪个桶中,通过tab[i = (n - 1) & hash]公式计算得出 这里的n是Hash ...
- XML约束DTD
<元素1> <元素2> <元素3>描述1</元素3> <元素4>描述2</元素4> </元素2> </元素1& ...
- Nacos 使用
Nacos(一)-下载安装 https://blog.csdn.net/qq_21067307/article/details/103895607 转载 ...
- Oracle数据常用的备份与恢复?
Oracle的备份与恢复有三种标准的模式,大致分为两大类,备份恢复(物理上的)以及导入导出(逻辑上的),而备份恢复又可以根据数据库的工作模式分为非归档模式(Nonarchivelog-style)和归 ...
- Auth0案例学习(SpringMVC形式)
官方SpringMVC示例Github:https://github.com/auth0-samples/auth0-spring-mvc-sample/tree/master/01-Login Ma ...
- Mock 或 Stub 有什么区别?
存根 一个有助于运行测试的虚拟对象. 在某些可以硬编码的条件下提供固定行为. 永远不会测试存根的任何其他行为. 例如,对于空堆栈,您可以创建一个只为 empty()方法返回 true 的存根.因此, ...
- Redis缓存穿透、缓存雪崩、缓存击穿
缓存穿透: 缓存穿透,是指查询一个数据库一定不存在的数据.正常的使用缓存流程大致是,数据查询先进行缓存查询,如果key不存在或者key已经过期,再对数据库进行查询,并把查询到的对象,放进缓存.如果 ...
- 利用事件的冒泡特性,为子标签添加Onclick事件
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <m ...