摘要：然后運(yùn)行會(huì)發(fā)現(xiàn)文件夾中生成了和，文件內(nèi)容如下測(cè)試哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈內(nèi)容如下說明已經(jīng)打包成功，此時(shí)運(yùn)行，即可看到原文件中的內(nèi)容

本文所用插件版本如下：

nodejs:v8.11.3;

npm:5.6.0

webpack:4.16

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

1. 安裝Node.js

在Node.js官網(wǎng)下載8.11.3 lts版本，安裝即可，安裝完成后在cmd中輸入:

             node -v

顯示了版本號(hào)說明安裝成功！同時(shí)npm是Node.js的包管理工具，在安裝Node.js時(shí)，npm也已經(jīng)自動(dòng)安裝。

2. 安裝webpack和webpack-cli

cmd輸入

npm install webpack webpack-cli --save-dev

等待安裝成功后，cmd輸入

webpack -v

顯示了版本號(hào)后，說明webpack安裝成功。

- 創(chuàng)建項(xiàng)目文件夾，如：webpackdemo

在項(xiàng)目文件夾中命令行輸入：

npm init -y

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

- 在項(xiàng)目文件夾中新建src文件夾，作為存放html,css,js文件的文件夾。
在src中新建index.html文件，例如：

    
    
    
    


    
哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
    

        
1
        
2
        
3
        
4
        
5
        
6
        
7
        
8
    

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

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

新建index.js文件，內(nèi)容暫時(shí)留空。
同時(shí)需要注意的是：在index.html中，不要吧index.css和index.js引入。

新建dist文件夾，作為輸出文件夾，打包完成的文件將在這里存放。
在webpackdemo項(xiàng)目文件中新建webpack.config.js

命令行運(yùn)行：

webpack

會(huì)下載生成node_modules文件夾。

最后的文件夾如下：

webpack.config.js是webpack的配置工具，主要的工作在這里進(jìn)行。

依次寫入如下內(nèi)容

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,

            }
        })
    ]


}

這里的坑比較多，明天再細(xì)細(xì)的介紹。

在index.js中引入css文件：

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

這里的“style-loader!css-loader!”是webpack的css解析插件。

然后運(yùn)行：

webpack

會(huì)發(fā)現(xiàn)dist文件夾中生成了index1.html和main.js ，

index1.html文件內(nèi)容如下：

哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈哈
1
2
3
4
5
6
7
8

main.js內(nèi)容如下：

說明已經(jīng)打包成功，此時(shí)運(yùn)行index1.html，即可看到原文件index.html中的內(nèi)容：