webpack4.16壓縮打包

時間 2019-11-09

標籤 webpack4.16 webpack 壓縮打包简体版

原文原文鏈接

webpack4.16壓縮打包

本文所用插件版本以下：javascript

nodejs:v8.11.3;
npm:5.6.0
webpack:4.16

webpack的更新速度很快，差很少幾個月就會出一版，最新的4系列對webpack2和webpack3進行了很大的改進，同時也有不少坑須要踩，本文使用最基本的html,css,js文件進行壓縮打包，對webpack4.16使用方法進行梳理，有任何問題也歡迎提出。同時附上webpack中文官方文檔，有部分概念、配置、API等，請參考官方文檔。css

準備

1. 安裝Node.jshtml

在Node.js官網下載8.11.3 lts版本，安裝便可，安裝完成後在cmd中輸入:java

node -v

顯示了版本號說明安裝成功！同時npm是Node.js的包管理工具，在安裝Node.js時，npm也已經自動安裝。node

2. 安裝webpack和webpack-cliwebpack

cmd輸入web

npm install webpack webpack-cli --save-dev

等待安裝成功後，cmd輸入npm

webpack -v

顯示了版本號後，說明webpack安裝成功。json

建立項目

- 建立項目文件夾，如：webpackdemoapp

在項目文件夾中命令行輸入：

npm init -y

會看到多了一個package.json和package-lock.json文件，命令行中的提示warning不用管。

- 在項目文件夾中新建src文件夾，做爲存放html,css,js文件的文件夾。
在src中新建index.html文件，例如：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>測試</title>
</head>
<body>
    <div class='app' >哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div>
    <ul>
        <li>1</li>
        <li>2</li>
        <li>3</li>
        <li>4</li>
        <li>5</li>
        <li>6</li>
        <li>7</li>
        <li>8</li>
    </ul>
</body>
</html>

新建index.css文件，爲html寫上樣式：

.app{
    background-color: #ff8080;
    color: black;
    font-size: 18px;
}

新建index.js文件，內容暫時留空。
同時須要注意的是：在index.html中，不要吧index.css和index.js引入。

新建dist文件夾，做爲輸出文件夾，打包完成的文件將在這裏存放。
在webpackdemo項目文件中新建webpack.config.js

命令行運行：

webpack

會下載生成node_modules文件夾。

最後的文件夾以下：

配置

webpack.config.js是webpack的配置工具，主要的工做在這裏進行。

依次寫入以下內容

const path = require('path');
const webpack = require('webpack');
const htmlWebpackPlugin = require('html-webpack-plugin');
module.exports = {
    mode: "development",
    entry: "./src/index.js",
    output: {
        path: path.resolve(__dirname, "./dist"),
        filename: "main.js"

    },
    devServer: {
        port: 8080,  
        open: true,
        setup: function (app) {
            app.get('/data', (req, res) => {
                res.json({
                    name: 'kk',
                    age: 18
                })
            })
        }
    },
    module: {
        rules: [ {
            test: '/\.js$/',
            use: 'bable-loader'
        }, {
            test: '/\.css$/',
            use: [{
                    loader: 'style-loader'
                },
                {
                    loader: 'css-loader',
                },
            ]
        }, {
            test: '/\.png|jpe?g|svg$/',
            use: 'url-loader'
        }]
    },
    plugins: [
   
        new htmlWebpackPlugin({
            template: "./src/index.html",
            filename: 'index1.html',
            minify: {
                minimize: true,
                removeConments: true,
                collapseWhitespace: true,
                minifyCSS: true,
                minifyJS: true,

            }
        })
    ]


}

這裏的坑比較多，明天再細細的介紹。

在index.js中引入css文件：

import style from "style-loader!css-loader!./style.css";

這裏的「style-loader!css-loader!」是webpack的css解析插件。

而後運行：

webpack

會發現dist文件夾中生成了index1.html和main.js ，

index1.html文件內容以下：

<!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width,initial-scale=1"><meta http-equiv="X-UA-Compatible" content="ie=edge"><title>測試</title></head><body><div class="app">哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈</div><ul><li>1</li><li>2</li><li>3</li><li>4</li><li>5</li><li>6</li><li>7</li><li>8</li></ul><script type="text/javascript" src="main.js"></script></body></html>

main.js內容以下：