webpack 打包 todolist 应用

写在前面的话： 

一直想着手动配置webpack实现应用，正好最近这段时间比较空闲，就写了一个通过webpack打包实现todolist的简单应用。本文内容包括：通过webpack打包css，html，js文件处理，以及图片处理。以下是配置文件内容，如果你都能看懂，那本文对你可能收效甚微。如有不解之处，敬请细看。

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')
const miniCssExtractPlugin = require('mini-css-extract-plugin')

module.exports = {
    mode: 'development',
    entry: './src/js/main.js',
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[hash:8].js'
    },
    module: {
        rules: [{
                test: /(\.jsx|\.js)$/,
                use: {
                    loader: "babel-loader"
                },
                exclude: /node_modules/
            },
            {
                test: /\.css$/,
                use: ['style-loader', {
                    loader: miniCssExtractPlugin.loader
                }, 'css-loader']
            },
            {
                test: /\.html$/,
                use: [{
                    loader: 'html-withimg-loader'
                }]
            },
            {
                test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
                use: [{
                    loader: 'url-loader',
                    options: {
                        limit: 1,
                        outputPath: 'imgs/'
                    },
                }]
            },
        ]
    },
    devServer: {
        contentBase: path.join(__dirname, 'dist'),
        compress: false,
        port: 3000
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
        }),
        new miniCssExtractPlugin({
            filename: 'css/[name].css'
        })
    ]
}

一、什么是webpack？

　  这里引用webpack官网定义：webpack 是一个现代 JavaScript 应用程序的静态模块打包器(module bundler)。当 webpack 处理应用程序时，它会递归地构建一个依赖关系图(dependency graph)，其中包含应用程序需要的每个模块，然后将所有这些模块打包成一个或多个 bundle。通俗讲就是将资源进行重新整合。

　　webpack有四个核心概念：

1. entry （用于配置入口）　　　　
2. output （用于配置输入文件）
3. loader（用于对模块的源代码进行转换处理）
4. plugins（插件，webpack功能扩展，使得webpack无比强悍）

二、本文主要内容　

　　1. 首先创建项目目录

初始化： yarn init

//安装 webpack （尽量不要安装为全局依赖）

安装依赖： yarn add webpack wabpack-cli -D

然后创建相应的项目目录结构。

例：

　　2. 接着在 webpack.config.js 中进行配置

在 package.json 文件中配置运行脚本
 "scripts": {
   "build": "webpack"
 },
 配置后直接执行 yarn build 即可  如果没有配置则执行 npx webpack 命令

1. 打包js文件
    const path = require('path')
    module.exports = {
        // 入口文件
        entry: './src/js/main.js',
        // 输出文件
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: '[hash:8].js'
    },
       // module: {},
       // plugins: [],
       // devServer: {}
      }    

2.  如何打包 html文件
  我们需要安装一个插件
    yarn add html-webpack-plugin -D

    // 引入
    const HtmlWebpackPlugin = require('html-webpack-plugin')

    // 在配置中添加
    plugins: [
        new HtmlWebpackPlugin({
            template: './index.html',
            filename: 'index.html',
        })
    ]

即可在 dist 目录下生成相应的js 及html文件

3. 处理css文件
  （1）如果是在html文件中直接引入了css文件则只需要执行 yarn add css-loader style-loader -D 安装相应loader
   module: {
     rules: [
　　    {test: /\.css$/,　use: ['style-loader',  'css-loader']}
     ]
    }
　（2）如果在想实现自动引入css文件则需要要安装插件 yarn add mini-css-extract-plugin
　　　// 在plugins中添加如下代码

new miniCssExtractPlugin({
        filename: 'css/[name].css'
      })

　　　　// 将css中的loader 配置修改为

{test: /\.css$/,　use: ['style-loader', {loader: miniCssExtractPlugin.loader},  'css-loader']}

4、js文件处理 （将es6、7、8转换为es5，解决浏览器兼容问题）
　　安装babel-loader　yarn add babel-loader @babel/core -D
　{
    test: /(\.jsx|\.js)$/,use: {loader: "babel-loader"},
     //排除node_modules文件夹中的js文件
     exclude: /node_modules/
 }

5、图片处理
   [1]在css文件中使用背景图片时不需要任何配置

   [2]在js中创建图片时 安装  file-loader 或者 url-loader 

　{
    test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,

use: [{
      loader: 'url-loader',
      options: {
        limit: 1, // 图片小于多少时输出为base64格式
        outputPath: 'imgs/'  // 图片输出位置
      },
    }]}

  [3] 在html 中使用img标签引入图片 则需要安装 html-withimg-loader

{
    test: /\.html$/,

use: ['html-withimg-loader']

}

6、启动服务配置

安装 webpack-dev-server 并添加相应配置

devServer: {
    contentBase: path.join(__dirname, 'dist'),
    compress: false,
    port: 3000
}

如上配置即可在 3000端口启动服务，可以通过localhost：3000访问

在package.json中添加运行脚本

"scripts": {
   "dev": "webpack-dev-server", 
   "build": "webpack"
}

运行 yarn run dev 或执行 yarn run build 打包

三、附上完整代码

复制下面代码或点击该链接下载源码： https://github.com/moor-mupan/todoList.git

<-- index.html -->
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>webpack进阶</title>
    </head>
    <body>
        <div class="bigbox">
            <div class="out-box">
                <div class="item-tit">
                    <h1 class="title">TODOLIST 代办事项</h1>
                    <div class="flex">
                        <input id="addInput" class="input" type="text" placeholder="输入代办">
                        <button id="add" type="button" class="btn">添加代办</button>
                    </div>
                </div>
                <div class="item-box">
                    <h2>代办事项</h2>
                    <ul id="todo"></ul>
                </div>
                <div class="item-box">
                    <h2>已完成</h2>
                    <ul id="done"></ul>
                </div>
                <div class="img-box"></div>
            </div>
            <img src="./src/imgs/time.png" class="tipImg">
        </div>
        <div class="module" id="module">
            <div id="toNotDo">添加到待办</div>
            <div id="toDone">添加到已完成</div>
            <div id="del">删除</div>
            <div id="close">关闭</div>
        </div>
    </body>
</html>

// src/js/main.js
import '../css/main.css'

let $ = require('jquery')
$(() => {
    const $add = $('#add')
    const $addInput = $('#addInput')
    const $todo = $('#todo')
    const $done = $('#done')
    const $module = $('#module')
    const $close = $('#close')
    const $del = $('#del')
    const $toDone = $('#toDone')
    const $toNotDo = $('#toNotDo')
    let itemID = ''
    let cur = ''
    let nowID = ''

    $add.click(() => {
        let val = $addInput.val()
        if (val.trim() !== '') {
            itemID = guid()
            let dom = `<li id=${itemID}>${val}</li>`
            $todo.append(dom)
            $addInput.val('')
            todoHandle()
        } else {
            alert('输入代办内容')
        }
    })
    $toDone.click(() => {
        $done.append(cur)
        $('#todo>li').remove(`#${nowID}`)
        close()
    })
    $toNotDo.click(() => {
        $todo.append(cur)
        $('#done>li').remove(`#${nowID}`)
        close()
    })
    $del.click(() => {
        $('#done>li').remove(`#${nowID}`)
        $('#todo>li').remove(`#${nowID}`)
        close()
    })
    $close.click(() => {
        close()
    })

    function todoHandle() {
        let $li = $('li')
        let clientX = 0
        let clientY = 0

        $li.bind("contextmenu", function(e) {
            cur = e.currentTarget
            nowID = $(cur).attr('id')

            clientX = e.clientX
            clientY = e.clientY
            $module.css({
                display: 'inline-block',
                left: `${clientX}px`,
                top: `${clientY}px`
            })
            return false
        })
    }

    function close() {
        $module.css({
            display: 'none'
        })
    }

    function guid() {
        return 'xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx'.replace(/[xy]/g, function(c) {
            let r = Math.random() * 16 | 0,
                v = c == 'x' ? r : (r & 0x3 | 0x8);
            return v.toString(16);
        });
    }
})

/* src/css/main.css */
body{
    background-color: #39CCCC;
}

*{
    box-sizing: border-box;
}

.bigbox{
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.out-box{
    display: inline-block;
    width: 640px;
    padding: 30px;
}

.flex{
    display: flex;
    align-items: center;
}

.input {
    height: 30px;
    line-height: 30px;
    line-height: 30px;
    border: 1px solid #EEEEEE;
    border-radius: 6px 0 0 6px;
    padding: 0 20px;
}

.btn{
    height: 30px;
    border: 1px solid #001F3F;
    background-color: #004444;
    color: #fff;
    border-radius: 0 6px 6px 0;
}

.item-box{
    line-height: 40px;
    margin-bottom: 10px;
}

.item-box li{
    width: 360px;
    background-color: #004444;
    color: #fff;
    list-style: none;
    padding: 0 20px;
    border-bottom: 1px solid #FFFF00;
}

.item-box li:last-of-type{
    border: none;
}

.item-box li:hover{
    color: #FFFF00;
    cursor: pointer;
}

.module{
    /* display: inline-block; */
    border-radius: 6px;
    background-color: #fff;
    line-height: 30px;
    position: absolute;
    display: none;
}

.module div{
    padding: 0 30px;
}

.module div:hover{
    background-color: #ddd;
    cursor: pointer;
}

.tipImg{
    border-radius: 6px;
}

最终效果图如下：