基于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. 创建 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. 在packge.json 配置执行脚本
    {
    ...
    "scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start": "webpack-dev-server",
    "build": "webpack --env production"
    },
    ....
    }
  7. 执行 npm start 命令就会自动打开浏览器访问页面
  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. 基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建

    基于MyEclipse+9.0+++Tomcat+7.0的SSH+平台搭建 http://wenku.baidu.com/view/96fbfe0f581b6bd97f19ea1d.html 用MyE ...

  3. 第三篇 基于.net搭建热插拔式web框架(重造Controller)

    由于.net MVC 的controller 依赖于HttpContext,而我们在上一篇中的沙箱模式已经把一次http请求转换为反射调用,并且http上下文不支持跨域,所以我们要重造一个contro ...

  4. 第二篇 基于.net搭建热插拔式web框架(沙箱的构建)

    上周五写了一个实现原理篇,在评论中看到有朋友也遇到了我的问题,真的是有种他乡遇知己的感觉,整个系列我一定会坚持写完,并在最后把代码开源到git中.上一篇文章很多人看了以后,都表示不解,觉得不知道我到底 ...

  5. 基于Eclipse搭建Hadoop源码环境

    Hadoop使用ant+ivy组织工程,无法直接导入Eclipse中.本文将介绍如何基于Eclipse搭建Hadoop源码环境. 准备工作 本文使用的操作系统为CentOS.需要的软件版本:hadoo ...

  6. EJB3.0开发环境的搭建

    EJB Container的介绍SUN公司正式推出了EJB的规范之后,在众多的公司和开发者中引起了非常大的反响.标志着用Java开发企业级应用系统将变的非常easy.很多公司都已经推出了或正打算EJB ...

  7. Centos7安装Docker 基于Dockerfile 搭建httpd运行环境

    Centos7安装Docker 基于Dockerfile 搭建httpd运行环境 docker docker搭建 docker build 本文档完成目标内容如下 使用Docker搭建http服务器一 ...

  8. 基于Hexo搭建博客并部署到Github Pages

    基于Hexo搭建博客并部署到Github Pages 之前在简书上写东西,觉得自己还是太浮躁.本来打算用Flask自己写一个,以为是微框架就比较简单,naive.HTML.CSS.JS等都要学啊,我几 ...

  9. Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具)

    Ubuntu 14.10下基于Nginx搭建mp4/flv流媒体服务器(可随意拖动)并支持RTMP/HLS协议(含转码工具) 最近因为项目关系,收朋友之托,想制作秀场网站,但是因为之前一直没有涉及到这 ...

随机推荐

  1. Python集成开发工具(IDE)推荐

    1.7 Python集成开发工具(IDE)推荐 1.7.1 Notepad++ Notepad++是Windows操作系统下的一套文本编辑器(软件版权许可证: GPL),有完整的中文化接口及支持多国语 ...

  2. 【Java】这 35 个 Java 代码优化细节!

    前言 代码 优化 ,一个很重要的课题.可能有些人觉得没用,一些细小的地方有什么好修改的,改与不改对于代码的运行效率有什么影响呢?这个问题我是这么考虑的,就像大海里面的鲸鱼一样,它吃一条小虾米有用吗?没 ...

  3. Python - dict类型

  4. JSDOM基础

    JavaScript 通过 HTML DOM,可访问 JavaScript HTML 文档的所有元素. HTML DOM 模型被构造为对象的树: HTML DOM 树 JavaScript 能够改变页 ...

  5. Jquery中each的3种遍历方式

    学习目标: 参考博文: https://blog.csdn.net/honey_th/article/details/7404273 一.Jquery中each的几种遍历方法 1. 选择器+遍历 &l ...

  6. in a frame because it set 'X-Frame-Options' to 'sameorigin'

    不是所有网站都给  iframe嵌套的,  有的网站设置了  禁止嵌套!!! 浏览器会依据X-Frame-Options的值来控制iframe框架的页面是否允许加载显示出来, 看你们公司这么设置了!! ...

  7. 循序渐进搞懂 TCP 三次握手核心

    前言 本文旨在通过形象的例子和实操,把无形的.虚拟的网络转为具体的.可视化的.带领网络小白一步步的掌握 TCP 三次握手核心知识点,为后续深入学习 TCP 协议打基础. 通俗版 如下图所示,小明(客户 ...

  8. C# 将PDF转为Excel

    通常,PDF格式的文档能支持的编辑功能不如office文档多,针对PDF文档里面有表格数据的,如果想要编辑表格里面的数据,可以将该PDF文档转为Excel格式,然后编辑.本文,将以C#代码为例,介绍如 ...

  9. NLP---word2vec的python实现

    import logging from gensim.models import word2vec import multiprocessing # 配置日志 logging.basicConfig( ...

  10. 1、【Python运维脚本】Python 按时间删除和清空文件

    删除和清空文件,用shell的话一条命令就够了,Python要一堆命令. 但是为了学习Python,所以用于实战,就得这么干了. Python 按时间删除和清空文件 #!/usr/bin/python ...