• 9.webpack4开发环境的基本配置

    1 执行步骤

    1）创建并引入相关文件，如图

     2 代码段

    1）webpack.config.js

    1. import { resolve } from 'path';
    2. import HtmlWebpackPlugin = require('
    3. module.exports = {
    4.     // 配置入口起点
    5.     entry: './src/js/index.js',
    6.     output: {
    7.         filename: 'js/built.js',
    8.         path: resolve(__dirname,'build')
    9.     },
    10.     module: {
    11.         rules: [
    12.             {
    13.                 test: /\.css$/,
    14.                 use: ['style-loader','css-loader']
    15.             },
    16.             {
    17.                 test: /\.less$/,
    18.                 use: ['style-loader','css-loader','less-loader']
    19.             },
    20.             {
    21.                 test: /\.html$/,
    22.                 loader: 'html-loader'
    23.             },
    24.             {
    25.                 test: /\.(jpg|jpeg|png|gif)$/,
    26.                 loader: 'url-loader',
    27.                 options: {
    28.                     limit: 8 * 1024,
    29.                     name: '[hash:10].[ext]'
    30.                     esModule: false,
    31.                     outputPath: 'imgs'
    32.                 }
    33.             },
    34.             {
    35.                 test: /\.html/,
    36.                 loader: 'html-loader'
    37.             },
    38.             {
    39.                 exclude: /\.(html|js|less|css|png|jpeg|jpg|gif)/,
    40.                 loader: 'file-loader',
    41.                 options: {
    42.                     name: '[hash:10].[ext]',
    43.                     outputPath: 'media'
    44.                 }
    45.             }
    46.         ]
    47.     },
    48.     plugins: [
    49.         new HtmlWebpackPlugin({
    50.             template: './src/index.html'
    51.         })
    52.     ],
    53.     devServer: {
    54.         contentBase: resolve(__dirname, 'build'),
    55.         compress: true,
    56.         port: 5000,
    57.         open: true
    58.     },
    59.     mode: 'development'
    60. }

    2）index.js

    1. // 引入 iconfont 样式文件
    2. import '../css/iconfont.css';
    3. import '../css/index.less';
    4.  
    5. function add(x,y) {
    6.     return x + y;
    7. }
    8. console.log(add(1,2));

    3）index.less

    1. #box1 {
    2.     width: 100px;
    3.     height: 100px;
    4.     background-image: url('../imgs/vue.jpg');
    5.     background-repeat: no-repeat;
    6.     background-size: 100% 100%;
    7.     background-color: pink;
    8. }
    9.  
    10. #box2 {
    11.     width: 200px;
    12.     height: 200px;
    13.     background-image: url('../imgs/react.png');
    14.     background-repeat: no-repeat;
    15.     background-size: 100% 100%;
    16.     background-color: skyblue;
    17. }
    18.  
    19. #box3 {
    20.     width: 300px;
    21.     height: 300px;
    22.     background-image: url('../imgs/angular.jpg');
    23.     background-repeat: no-repeat;
    24.     background-size: 100% 100%;
    25.     background-color: yellowgreen;
    26. }
    27.  
    28. #title {
    29.     color: #fff;
    30. }

    4）iconfont.css等自行去阿里巴巴icon库下载并引入，imgs下的图片文件自行随便加

    5）index.html

    1. html>
    2. <html lang="en">
    3. <head>
    4.     <meta charset="UTF-8">
    5.     <meta http-equiv="X-UA-Compatible" content="IE=edge">
    6.     <meta name="viewport" content="width=device-width, initial-scale=1.0">
    7.     <title>Documenttitle>
    8. head>
    9. <body>
    10.     <div id="box1">div>
    11.     <div id="box2">div>
    12.     <div id="box3">div>
    13.     <img src="./imgs/angular.jpg" alt="angular">
    14.     <span class="iconfont icon-User">span>
    15.     <span class="iconfont icon-Cloud">span>
    16.     <span class="iconfont icon-a-Share3">span>
    17.     <span class="iconfont icon-a-LinkOff2">span>
    18.     <span class="iconfont icon-a-Layout5">span>
    19.     <h3>html webpackh3>
    20.     <h3>html webpackh3>
    21. body>
    22. html>

    2. 流程介绍

    以上内容为简单基本配置，后期会有更为详尽的。

    1）需要下载的第三方依赖

    ①处理less、css样式文件：

    npm less less-loader css-loader style-loader -D

    用于将less文件转为css文件并通过css文件转为css字符串插入js文件，再通过style-loader生成style标签插入html中的head标签中

    ②处理图片文件

    npm url-loader file-loader html-loader -D

    ③处理其它文件资源

    npm file-loader（上面已经有了）

    ④复制html文件并引入打包输出的所有资源(JS/CSS)

    npm i html-webpack-plugin -D

    ⑤配置devServer

    用于自动化（自动编译、自动打开浏览器、自动刷新浏览器）

  • 相关阅读:
    C语言数据类型
    crlfuzz&crlfsuite
    记录一下Java中关于引用的用法
    计算机毕业设计之java+springcloud基于vue的智慧养老平台-老人信息管理-敬老院管理系统
    架构设计流程
    Java计算两个日期之间的工作时长【包含节假日、补班、周末】
    基于瞬时无功功率ip-iq的谐波信号检测Simulink仿真
    MySQL模块---查询和插入数据
    《向量数据库指南》——2023云栖大会现场，向量数据库Milvus Cloud成关注焦点
    性能测试工具——Jmeter的安装【超详细】
  • 原文地址：https://blog.csdn.net/weixin_43893483/article/details/126557287