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

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

例:
    webpack 打包 todolist 应用

  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 打包

三、附上完整代码

<-- 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; }

最终效果图如下:

webpack 打包 todolist 应用

 

上一篇:简单几步实现页面主题切换


下一篇:less 记录