基于Webpack5 搭建HTMl+Less的前端项目

  1. 新建一个文件夹(比如命名为webpack)

  2. 用编辑器打开该文件夹，并在编辑器的终端执行 npm init -y 自动创建package.json 文件

  3. 新建 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;
    }
  4.   安装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 等安装
    5. 

  5. 创建 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').default
    

    const { 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,
    

        },
    

      }
    

    }
    

    

    

    6. 

  6. 在packge.json 配置执行脚本
    

    

    {
    
 ...
    
 "scripts": {
    
    "test": "echo \"Error: no test specified\" && exit 1",
    
    "start": "webpack-dev-server",
    
    "build": "webpack --env production"
    
  },
    
  ....
    
}
    

    7. 

  7. 执行 npm start 命令就会自动打开浏览器访问页面
    8. 

  8. gitee项目地址 https://gitee.com/jilangyangbo/webpack5.git


 
												


											
从0开始基于Webpack5 搭建HTML+Less 前端工程的更多相关文章
	

    
								
  1. H5新人福音~零配置搭建现代化的前端工程
		
    X-BUILD一套基于Webpack(v4.21.0)快速搭建H5场景开发环境的脚手架,只需要几分钟的时间就可以运行起来.X-BUILD是针对H5开发的一套自动化构建工具,致力于提升开发效率,减小开发 ...
    
		
    2. 
						
  2. 基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建
		
    基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建 http://wenku.baidu.com/view/96fbfe0f581b6bd97f19ea1d.html 用MyE ...
    
		
    3. 
						
  3. 第三篇 基于.net搭建热插拔式web框架（重造Controller）
		
    由于.net MVC 的controller 依赖于HttpContext,而我们在上一篇中的沙箱模式已经把一次http请求转换为反射调用,并且http上下文不支持跨域,所以我们要重造一个contro ...
    
		
    4. 
						
  4. 第二篇 基于.net搭建热插拔式web框架（沙箱的构建）
		
    上周五写了一个实现原理篇,在评论中看到有朋友也遇到了我的问题,真的是有种他乡遇知己的感觉,整个系列我一定会坚持写完,并在最后把代码开源到git中.上一篇文章很多人看了以后,都表示不解,觉得不知道我到底 ...
    
		
    5. 
						
  5. 基于Eclipse搭建Hadoop源码环境
		
    Hadoop使用ant+ivy组织工程,无法直接导入Eclipse中.本文将介绍如何基于Eclipse搭建Hadoop源码环境. 准备工作 本文使用的操作系统为CentOS.需要的软件版本:hadoo ...
    
		
    6. 
						
  6. EJB3.0开发环境的搭建
		
    EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...
    
		
    7. 
						
  7. Centos7安装Docker 基于Dockerfile 搭建httpd运行环境
		
    Centos7安装Docker 基于Dockerfile 搭建httpd运行环境 docker docker搭建 docker build 本文档完成目标内容如下 使用Docker搭建http服务器一 ...
    
		
    8. 
						
  8. 基于Hexo搭建博客并部署到Github Pages
		
    基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...
    
		
    9. 
						
  9. Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)
		
    Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具) 最近因为项目关系,收朋友之托,想制作秀场网站,但是因为之前一直没有涉及到这 ...
    
		
    10. 
		

	


随机推荐
	

    
									
  1. TTL、RS232、RS485、UART、串口的关系和常见半双工、全双工协议
			
    串口(UART口).COM口.USB口.DB9.DB25是指的物理接口形式(硬件) TTL.RS-232.RS-485是指的电平标准(电平信号)   我们单片机嵌入式常用的串口有三种(TTL/RS-2 ...
    
			
    2. 
						
  2. 迷宫问题，打印所有路径，深度搜索，dfs
			
    #include<iostream> using namespace std; int maze [5][5] = { 0, 1, 0, 0, 0, 0, 1, 0, 1, 0, 0, 0 ...
    
			
    3. 
						
  3. 什么是 AQS ?
			
    AQS 是 AbustactQueuedSynchronizer 的简称,它是一个 Java 提高的底层同步工具类,用一个 int 类型的变量表示同步状态,并提供了一系列的 CAS 操作来管理这个同步 ...
    
			
    4. 
						
  4. 你将如何使用 thread dump？你将如何分析 Thread  dump？
			
    新建状态(New) 用 new 语句创建的线程处于新建状态,此时它和其他 Java 对象一样,仅仅在堆区 中被分配了内存. 就绪状态(Runnable) 当一个线程对象创建后,其他线程调用它的 sta ...
    
			
    5. 
						
  5. Java 中，Serializable 与 Externalizable 的区别？
			
    Serializable 接口是一个序列化 Java 类的接口,以便于它们可以在网络上传输 或者可以将它们的状态保存在磁盘上,是 JVM 内嵌的默认序列化方式,成本高. 脆弱而且不安全.Externa ...
    
			
    6. 
						
  6. 提高scrapy爬取效率配置
			
    提高scrapy爬取效率配置 #增加并发: 默认scrapy开启的并发线程为32个,可以适当进行增加.在settings配置文件中修改CONCURRENT_REQUESTS = 100值为100,并发 ...
    
			
    7. 
						
  7. yum下载安装mysql服务
			
    1.下载mysql源码 wget http://dev.mysql.com/get/mysql57-community-release-el7-8.noarch.rpm 2.安装mysql源 yum  ...
    
			
    8. 
						
  8. 4. Git基本工作流程
			
    4. Git基本工作流程 Git工作区域 向仓库中添加文件流程
    
			
    9. 
						
  9. html5与css交互 API 《一》classList
			
    用过jquery的朋友都知道,jquery提供的方法中(3个)可以很方便的为指定的节点添加.删除类选择器,即addClass.removeClass.toggleClass.具体的用法我这里就不谈了, ...
    
			
    10. 
						
  10. 小程序踩坑记录-上传图片及canvas裁剪图片后上传至服务器
			
    最近在写微信小程序的上传图片功能,趟过了一些坑记录一下. 想要满足的需求是,从手机端上传图片至服务器,为了避免图片过大影响传输效率,需要把图片裁剪至适当大小后再传输 主要思路是,通过wx.choose ...
    
			
    11.