Webpack 打包 - 7.webpack 开发环境配置

1.文件结构

 

 

 

 

 

 2. iconfont.css

@font-face {font-family: "iconfont";
  src: url('../media/iconfont.eot?t=1581833245354'); /* IE9 */
  src: url('../media/iconfont.eot?t=1581833245354#iefix') format('embedded-opentype'), /* IE6-IE8 */
  url('data:application/x-font-woff2;charset=utf-8;base64,d09GMgABAAAAAAO0AAsAAAAACFwAAANlAAEAAAAAAAAAAAAAAAAAAAAAAAAAAAAAHEIGVgCDMgqDaIM0ATYCJAMUCwwABCAFhG0HWhtSBxHVm8PIfhzGMck6c2bkTSjPG/sePF+69P3d1UUnhRgUQqyA5BBPz9SlMjBVQJUnnZ0EgFmbnT6jIgzdMR78N0/ZUHpuv/3PMeOtBfPb1iBTzAoK2hvgKIFms6qLCLI7kBP1G8auvIibIYBDX0Yji5as2oSNwdgkgJw6fnQ/dsqIqakUbIRAyYkGeY6FrR6oVOCZ//tSz0SxQWFpjFutO7L4EF7VpKpF2v/v79I+/nh2gJ0GGhgNGJALpc5T6DA5Go2jzDd4gIONQo01bWaVV7Xo//9YuiO1Y/7DA0GhMSABjPLWAHgoZaBqkk2FQNVMKhRUeVRoqFokfjG3sQBwgHbAYyABaQePmRtAoYOtDXzQPKybsYNdjTn6Jzsk51GWn7klN3dTXt7mgoKt+fnbLF3f1wEvObPPi9w9uYWb8oo2F5SUnVZ85UOoH/YoIiT8XBtpjZ08atpabuKrnYdfMP5Xt92j72IdaEPrK7QVhw6yY+4m7agtsw8flfcFS+PyBuBKfv5s18BR7fS2trrdPlec//38zRtMpuH/Fsr27bKQ5/Kdpjg37F3bwtqpU22eLw1zz4W1a25tFpg8l4eaeDGTVeWbSVNxY8+5vudH4mHnVczD8/el+Xl/O9pFIoFf378iAg8mUyTzrBn4y5aV1dQ2eU3OzLKpU7jx+o21bNm6dbbO8oyYrDt1ah2SCeVB2Rt8UuSbeXu9/t6NiEgvkouAvTpSVcL/Su3r/gA+CsQ+o2D/yfvdhXV7283+a7sGgOIzLX1g8H+loV/KRkFr0W8VtewwqsQwWUZutYVyyGI8P02plD4H+JnejpSPo+7SOg6CnRIxULSiD2hsBiMMZjRYuEyGADbzwGEUS0936cQFNGKCwEjuABDa8xsUbYkATXvSEAZTBhZdaYQA7UWDwxbpdEGXoWJOfqGhIXpp/zJ1x66WhT6ovGF4r40lJT7hBQtTRLI4zWZq7LAx9oTPkJMqascmFbgd1vWQ044ZHeORPMsk0bJvirtjc56Fhobopf3L1B27ur3pcz9/w/BeG6tpq3C+YGGaXLI4bYGolXurtmt5TfgMOamidmxSATtWM3nIWb5sRsd47BE/ywR107bKeH719ozHAAdjsSVKtBixJEDw5EMREW5LGHZklCt3FM4BAAAA') format('woff2'),
  url('../media/iconfont.woff?t=1581833245354') format('woff'),
  url('../media/iconfont.ttf?t=1581833245354') format('truetype'), /* chrome, firefox, opera, Safari, Android, iOS 4.2+ */
  url('../media/iconfont.svg?t=1581833245354#iconfont') format('svg'); /* iOS 4.1- */
}

.iconfont {
  font-family: "iconfont" !important;
  font-size: 16px;
  font-style: normal;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.icon-icon-test:before {
  content: "\e633";
}

.icon-icon-test1:before {
  content: "\e63a";
}

.icon-icon-test2:before {
  content: "\e640";
}

.icon-icon-test3:before {
  content: "\e644";
}

 

index.less

#box {
  width: 200px;
  height: 200px;
  background-image: url('../imgs/angular.jpg');
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

 

index.js

// 引入
import '../css/iconfont.css';
import '../css/index.less';

function add(x, y) {
  return x + y;
}

console.log(add(1, 2));

 

index.html

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>开发环境配置</title>
</head>

<body>
    <h1>开发环境配置</h1>
    <span class="iconfont icon-icon-test"></span>
    <span class="iconfont icon-icon-test2"></span>
    <span class="iconfont icon-icon-test3"></span>
    <span class="iconfont icon-icon-test1"></span>
    <div id="box"></div>
    <img src="./imgs/vue.jpg" alt="vue">
    <img src="./imgs/react.png" alt="react">
</body>

</html>

 

webpack.config.js

/*
  开发环境配置：能让代码运行
    运行项目指令：
      webpack 会将打包结果输出出去
      npx webpack-dev-server 只会在内存中编译打包，没有输出
*/

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
    entry: './src/js/index.js',
    output: {
        filename: 'js/built.js',
        path: resolve(__dirname, 'build')
    },
    module: {
        rules: [
            // loader的配置
            {
                // 处理less资源
                test: /\.less$/,
                use: ['style-loader', 'css-loader', 'less-loader']
            },
            {
                // 处理css资源
                test: /\.css$/,
                use: ['style-loader', 'css-loader']
            },
            {
                // 处理图片资源
                test: /\.(jpg|png|gif)$/,
                loader: 'url-loader',
                options: {
                    limit: 8 * 1024,
                    name: '[hash:10].[ext]',
                    // 关闭es6模块化
                    esModule: false,
                    outputPath: 'imgs'
                }
            },
            {
                // 处理html中img资源
                test: /\.html$/,
                loader: 'html-loader'
            },
            {
                // 处理其他资源
                exclude: /\.(html|js|css|less|jpg|png|gif)$/,
                loader: 'file-loader',
                options: {
                    name: '[hash:10].[ext]',
                    outputPath: 'media'
                }
            }
        ]
    },
    plugins: [
        // plugins的配置
        new HtmlWebpackPlugin({
            template: './src/index.html'
        })
    ],
    mode: 'development',
    devServer: {
        contentBase: resolve(__dirname, 'build'),
        compress: true,
        port: 3000,
        open: true
    }
};

 

执行打包命令：

$ webpack

 

生成文件：

 

 

 

打开index.html

 

 

 end~

 

posted @ 2022-09-08 11:04  Evengod  阅读(75)  评论(0)  编辑  收藏  举报