webpack核心概念使用的綜合小案例

注：

因爲版本更新很快，一樣的配置不一樣版本極可能會出錯（這個就很絕望了）

解決思路

1. 看文檔
2. 查看源碼接口
3. 網上搜索相應錯誤

環境

webpack4.x + yarn

文件結構

.
├── dist //打包輸出目錄
├── package.json
├── postcss.config.js
├── rules_config //module 中各類文件到導入處理
│   ├── babel-polyfill.js
│   ├── babel-runtime.js
│   ├── css.js
│   ├── font.js
│   ├── images.js
│   └── less.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
├── webpack.config.build.js
├── webpack.config.bundle.js
├── webpack.config.serve.js
└── yarn.lock

 

package.json

{
  "name": "sample",
  "version": "1.0.0",
  "private": true,
  "license": "MIT",
  "scripts": {
    "bundle": "webpack --config webpack.config.bundle.js",
    "serve": "webpack-dev-server --config webpack.config.serve.js",
    "build": "webpack --config webpack.config.build.js"
  },
  "devDependencies": {
    "@babel/core": "^7.4.5",
    "@babel/plugin-transform-runtime": "^7.4.4",
    "@babel/polyfill": "^7.4.4",
    "@babel/preset-env": "^7.4.5",
    "@babel/runtime": "^7.4.5",
    "@babel/runtime-corejs2": "^7.4.5",
    "autoprefixer": "^9.6.0",
    "babel-loader": "^8.0.6",
    "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",
    "webpack-dev-server": "^3.7.1"
  },
  "browserslist": [
    "last 2 versions"
  ]
}

 

可用的命令

• yarn build //打包生產環境的代碼
• yarn serve //運行本地服務器
• yarn bundle //打包開發環境的代碼（未壓縮）
• yarn add -D [pagckage-name] //添加開發依賴包
• yarn install  [pagckage-name] //安裝包

 

打包配置文件

webpack.config.bundle.js

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

module.exports = {
    entry: {
        app: './src/js/app.js' //入口js文件
    },
    output: {
        filename: "[hash:8]--[name].js", //輸出的js文件名
        path: path.resolve(__dirname, 'dist'), //輸出目錄（必須是絕對路徑）
        // publicPath: "https://192.168.1.106:6655" //用於CDN
    },
    mode: "development", //開發環境
    devtool: "cheap-module-eval-source-map",
    module: {
        rules: [
            require('./rules_config/css.js'),
            require('./rules_config/less.js'),
            require('./rules_config/images.js'),
            require('./rules_config/font.js'),
            {
                test: /\.js$/,
                exclude: /node_modules/,
                loader: "babel-loader",
                options: require('./rules_config/babel-polyfill.js'),
                // options: require('./rules_config/babel-runtime.js'),
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({ //生成模版html，自動注入打包的js文件
            template: './view/index.html'
        }),
        new CleanWebpackPlugin(), //清除dist目錄的內容
    ],
    stats: {children: false} //避免 Entrypoint undefined = index.html
};

 

webpack.config.serve.js

const md = require('./webpack.config.bundle.js');
const path = require('path');
const serve = {
    devServer: {
        contentBase: path.resolve(__dirname, 'dist'),
        port: 12986,
        hot: true,
        hotOnly: true,
        open: true
    }
};
Object.assign(md, serve);
const webpack = require('webpack');
md.plugins.push(new webpack.HotModuleReplacementPlugin());
module.exports = md;

 

webpack.config.build.js

const md = require('./webpack.config.bundle.js');
const build = {
    mode: "production", //用於線上（生成環境）
    devtool: "cheap-module-source-map",
};
Object.assign(md, build);
module.exports = md;

 

處理各類文件（loader）的配置

css 文件

module.exports = {
    test: /.css$/,
    use: [
        'style-loader',
        {
            loader: "css-loader",
            options: {
                importLoaders: 1
            }
        },
        'postcss-loader'
    ]
};

 

less 文件

module.exports = {
    test: /\.less$/,
    use: [
        'style-loader',
        {
            loader: "css-loader",
            options: {
                modules: true,
                importLoaders: 2
            }
        },
        'less-loader',
        "postcss-loader"
    ]
};

 

js 文件，主要出es6轉es5

全局替換，用於應用

module.exports = {
    "presets": [
        [
            "@babel/preset-env",
            {
                "targets": {
                    "edge": "17",
                    "firefox": "60",
                    "chrome": "67",
                    "safari": "11.1",
                    "ie": "9"
                },
                "useBuiltIns": "usage", //按需引入
                "corejs": "2",
            }
        ]
    ],
};

 

局部替換，用於框架/庫

module.exports = {
    "plugins": [
        [
            "@babel/plugin-transform-runtime",
            {
                "absoluteRuntime": false,
                "corejs": 2,
                "helpers": true,
                "regenerator": true,
                "useESModules": false
            }
        ]
    ]
};

 

font 文件

module.exports = {
    test: /\.(eot|svg|ttf|woff|woff2)$/,
    loader: "file-loader",
    options: {
        name: '[hash:8]--[name].[ext]',
    }
};

 

圖片文件

module.exports = {
    test: /\.(png|jpg|gif)$/,
    loader: "url-loader",
    options: {
        name: '[hash:8]--[name].[ext]',
        outputPath: 'images', //輸出目錄中的images的目錄下
        limit: 8 * 1024, //小於8K 轉成 base64字符串
    }
};

 

樣式相關的文件

/src/sheet/css.css

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

 

/src/sheet/less.less

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

 

postcss.config.js //用於使用 postcss-loader

module.exports = {
    plugins: [
        require('autoprefixer')
    ],
};

 

/view/index.html 模版文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
<h1 class="hmr">
    1111111
</h1>
<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>

 

測試使用的代碼 /src/js/app.js

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


// 樣式模塊化測試
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);


// es6 語法，按需加載
const es6m = (a, b)=>{
    return new Promise(resolve => {
        resolve(a + b);
    });
};
(async function () {
    const ret = await es6m('afn111', 'b11');
    console.log(ret);
})();


// 普通的js導入測試11
import './math.js';
// HMR
if(module.hot){
    module.hot.accept(['./math.js'], function () {
        console.log('213')
    });
}

 

font文件夾中的內容

阿里巴巴矢量圖標庫  https://www.iconfont.cn/ 中下載的壓縮包中的字體文件