demo_static_resrouce

环境

win10 + webstorm 2019.1.3 + node 12.x + yarn

实现的的功能

1. 基本的js打包（支持规范：ES6 module | requirejs | commonjs）
2. 打包样式css、less，样式的模块化 ，增加样式的厂商前缀
3. 打包字体
4. 打包图片（小于8K的转base64字符串）
5. 自动注入打包后的js文件
6. 自动清理打包目录（只留下最后一次成功打包的文件）

文件结构

.
├── bulid-webpack.config.js //生成模式配置
├── dev-webpack.config.js //开发模式配置
├── dist //打包后的目录
│   ├── 07d95431--app.js
│   ├── 07d95431--app.js.map
│   ├── 524c08db--iconfont.eot
│   ├── a8ed3992--iconfont.woff
│   ├── c4b92501--iconfont.svg
│   ├── f4a753e6--iconfont.ttf
│   ├── images
│   │   └── 83ac0039--1.png
│   └── index.html
├── package.json
├── postcss.config.js
├── src
│   ├── fonts //字体
│   │   ├── iconfont.css
│   │   ├── iconfont.eot
│   │   ├── iconfont.svg
│   │   ├── iconfont.ttf
│   │   ├── iconfont.woff
│   │   └── iconfont.woff2
│   ├── images //图片
│   │   ├── 1.png
│   │   └── 2.png
│   ├── js
│   │   ├── app.js
│   │   └── math.js
│   └── sheet
│       ├── css.css //
│       └── less.less //
├── view
│   └── index.html //
└── yarn.lock //

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "dev": "webpack --config dev-webpack.config.js",
    "build": "webpack --config bulid-webpack.config.js"
  },
  "devDependencies": {
    "autoprefixer": "^9.6.0",
    "clean-webpack-plugin": "^3.0.0",
    "css-loader": "^2.1.1",
    "file-loader": "^4.0.0",
    "html-webpack-plugin": "^3.2.0",
    "less": "^3.9.0",
    "less-loader": "^5.0.0",
    "postcss-loader": "^3.0.0",
    "style-loader": "^0.23.1",
    "url-loader": "^2.0.0",
    "webpack": "^4.33.0",
    "webpack-cli": "^3.3.3"
  },
  "browserslist": [ //支持的浏览器，主流浏览器最后2个版本，用于样式添加厂商前缀
    "last 2 versions"
  ]
}

webapck.config

dev-webpack.config.js     (yarn dev)

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

module.exports = {
    entry: {
        app: './src/js/app.js'
    },
    output: {
        filename: "[hash:8]--[name].js",
        path: path.resolve(__dirname, 'dist'),
        // publicPath: "https://192.168.1.106:6655" //用于CND之类
    },
    mode: "development",
    devtool: "cheap-module-eval-source-map",
    module: {
        rules: [
            {
                test: /.css$/,
                use: [
                    'style-loader',
                    {
                        loader: "css-loader",
                        options: {
                            importLoaders: 1
                        }
                    },
                    'postcss-loader'
                ]
            },
            {
                test: /\.less$/,
                use: [
                    'style-loader',
                    {
                        loader: "css-loader",
                        options: {
                            modules: true,
                            importLoaders: 2
                        }
                    },
                    'less-loader',
                    "postcss-loader",
                ]
            },
            {
                test: /\.(png|jpg|gif)$/,
                use: {
                    loader: "url-loader",
                    options: {
                        name: '[hash:8]--[name].[ext]',
                        outputPath: 'images',
                        limit: 8 * 1024,
                    }
                }
            },
            {
                test: /\.(eot|svg|ttf|woff|woff2)$/,
                use: {
                    loader: "file-loader",
                    options: {
                        name: '[hash:8]--[name].[ext]',
                    }
                }
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ //拷贝到输出目录，并注入打包后的js文件
            template: "./view/index.html"
        }),
        new CleanWebpackPlugin(), //清除输出目录中的文件
    ]
};

bulid-webpack.config.js   (yarn build)

const md = require('./dev-webpack.config.js');
const build = { //不一样的就这两个部分
    mode: "production",
    devtool: "cheap-module-source-map",
};
Object.assign(md, build);
module.exports = md;

postcss.config.js

module.exports = {
    plugins: [
        require('autoprefixer') //使用插件autoprefixer, 用于增加厂商前缀
    ],
};

view 下的 index.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<div style="font-size: 100px; background: coral">
    <i class="iconfont icon-icon-test"></i>
    <i class="iconfont icon-icon-test1"></i>
    <i class="iconfont icon-icon-test2"></i>
</div>
<div id="img1" style="width: 100px; height: 150px; overflow: hidden"></div>
<div id="img2"></div>

<h1 class="at">全局的</h1>
<h1 class="lt">模块化样式测试1(局部样式，代码中添加)</h1>
<div style="height: 200px"></div>
<h1 class="lt">模块化样式测试2（没有在代码中添加类）</h1>
</body>
</html>

样式

css

*{
    padding: 0;
    margin: 0;
}
.at{
    transform: translate(100px, 100px);
    color: aqua;
}

less

.lt{
  transform: translate(unit(100, px), unit(100, px));
  color: chocolate;
}

js

app.js

// 全局样式
import '../sheet/css.css';
import '../fonts/iconfont.css';

// 普通的js导入测试
import math from './math.js';

console.log('add(11, 11): ', math.add(11, 11));
console.log('mul(11, 11): ', math.mul(11, 11));
console.log('sub(110, 11): ', math.sub(110, 11));

// 样式模块化测试
import less from '../sheet/less.less';

window.document.querySelector('.lt').classList.add(less.lt);

// 图片测试 > 8 K
let img = new Image();
img.src = require('../images/1.png');
window.document.querySelector('#img1').appendChild(img);

// 图片测试 < 8 K
img = new Image();
img.src = require('../images/2.png');
window.document.querySelector('#img2').appendChild(img);

math.js

export default {
    sub: function (a, b) {
        return a - b;
    },
    add: function (a, b) {
        return a + b;
    },
    mul: function (a, b) {
        return a * b;
    }
}

fonts目录: Iconfont-阿里巴巴矢量图标库 （https://www.iconfont.cn/）上下载的文件

dist 目录：打包后的文件结构

注：yarn dev 和 yarn build 打包后的文件有点不同（后者有.map文件）